HTML5 表单验证

Posted 2020-06-20

html5 表单验证

验证属性

Required 属性

Required 属性主要防止域为空时提交表单。该属性不需要设置任何值。

语法：<input type="text" required />

Pattern 属性

Pattern 属性的作用是实现元素的验证。它支持使用正则表达式定制验证规则。

语法：<input type="text" pattern="13[0-9]\d{8}" />

Min 和 Max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定。

语法：：<input type="number" min="1" max="5">

Minlength 和 Maxlength 属性

Minlength 和 Maxlength 属性的作用是定制元素允许的最小字符串和最大字符串。

语法：<input type="text" minlength="1" maxlength="5">

Validity 属性

在 HTML5 提供的有关表单验证的新特性中，提供了一个 validity 属性。该属性是利用 ValidityState 对象描述指定元素的有效状态。

ValidityState 对象代表了有效状态，可以实现对指定元素进行约束验证功能，该对象提供了一系列的属性，这些属性用于描述指定元素的有效状态。

如何获取 ValidityState 对象，使用其提供的属性内容：

语法：指定元素 . validity 可以得到 ValidityState 对象

例子：Elem .validity . valid

验证状态

valid 状态

执行完毕，我们会得到一个布尔值，它表示表单控件是否已通过了所有的验证约束条件。可以把 valid 特性看做是最终验证结果：如果所有约束条件都通过了，Valid 的值就是 true。否则，只要有一项约束没通过，valid 的值都是 false。

if( username.validity.valid ){
    alert(‘通过‘);
} else {
    alert(‘用户名称有问题‘);‘
}

valueMissing 状态

如果表单控件设置了 required 特性，那么在用户填写完或者通过代码调用方式填值之前，控件会一直处于无效状态。例如：空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing 会返回 true。

if (username.validity.valueMissing ){
    alert(‘用户名称不能为空‘);
} else {
    alert(‘通过‘);
}

typeMismatch 状态

如果输入语法不符合指定的类型，那么这个状态就是 true。

例如：email 类型输入元素的内容不是电子邮件地址。

if( email.validity.typeMismatch ) {
    alert(‘Email格式不正确‘);
} else {
    alert(‘通过‘);
}

pattenMismatch 状态

如果输入内容与所设置模式不匹配，那么这个状态就是 true。

if( phone.validity.patternMismatch ) {
    alert(‘电话号码格式不正确‘);
} else {
    alert(‘通过‘);
}

tooLong 状态

如果输入内容长度大于 maxlength 属性指定值，那么这个状态就是 true。

if( pwd.validity.tooLong ) {
    alert(‘密码长度不能超过12位‘);
} else {
    alert(‘通过‘);
}

rangeUnderflow 状态

如果输入内容小于 min 属性声明的值，那么这个状态就是 true。

if( age.validity.rangeUnderflow ) {
    alert(‘年龄不符合要求‘);
} else {
    alert(‘通过‘);
}

stepMismatch 状态

如果给定的值与 min，max，step 不一致，那么这个状态就是 true。

if( elem.validity.setpMismatch ) {
    alert(‘范围设置不正确‘);
} else {
    alert(‘通过‘);
}

customError 状态

如果元素使用 setCustomValidity() 方法设置了自定义错误，那么这个状态就是 true。

if( uname.value == ‘‘ ) {
    uname.setCustomValidity(‘用户名称不能为空‘);
}

if( uname.validity.customError ) {
    alert(‘验证未通过‘);
}