目录
一、基础泛用校验
二、HTML表单自动验证——required
三、HTML表单自动验证——pattern
四、HTML约束条件验证
五、JavaScript 验证 API
5.1 约束验证 DOM 方法
5.1.1 checkValidity()
5.1.2 setCustomValidity()
5.2 约束验证 DOM 属性
5.3 Validity 属性
对于h5中常用的表单元素，js有一系列的验证方案，此贴将整理一下常用的一些js常用的表单验证方案。
一、基础泛用校验
对于普通表单来说，常规的校验方式如下，在表单提交之前通过dom节点获取表单组件内的值，对于不合规的数据进行校验拦截，理论上来说使用正则匹配这种方式在仍和地方都可以使用。泛用性较高。
<form name="myForm" method="post" onsubmit="validateForm()">
测试：<input type="text" name="myTest">
<input type="submit" value="提交">
</form>
<script>
function validateForm() {
const test = document.forms["myForm"]["myTest"].value;
if (test == null || test == "") {
alert("需要输入内容。");
return false;
}
}
</script>
二、HTML表单自动验证——required
对于表单验证html5中提供了必填字段required。
required 属性适用于以下 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<form name="myForm" method="post">
测试：<input type="text" name="myTest" required="required">
<input type="submit" value="提交">
</form>
自定义提示内容：
测试：<input type="text" name="myTest" required="required" oninvalid="setCustomValidity('请输入您的姓名');">
注意：
- required和required="required"等效。
- required必须要在form标签内才会生效。
- 提交按钮必须是submit类型，对于button类型无效。
- 提交按钮添加formnovalidate属性可以使required校验失效。
- 在元素中添加novalidate属性，禁用整个表单的验证功能。
三、HTML表单自动验证——pattern
pattern属性中可以使用正则表达式对于表单数据进行校验。
<form name="myForm" method="post">
测试：<input type="text" name="myTest" pattern="[0-9]*">
<input type="submit" value="提交">
</form>
注意：
- pattern属性在使用之后，对于空校验是不识别的，所以需要配合required使用。
- 同时在移动端的ios和安卓在正则适配上会有差异，这里暂不详细说明。
上述二和三是html5中为了校验原生匹配的属性，优点是使用快捷方便，缺点也很明显，不可以自定义样式，灵活性太差。管理端用用还行，用户端就不太方便了。
四、HTML约束条件验证
约束验证HTML输入属性：
属性 | 描述 |
disabled | 规定输入的元素不可用 |
max | 规定输入元素的最大值 |
min | 规定输入元素的最小值 |
pattern | 规定输入元素值的模式 |
required | 规定输入元素字段是必需的 |
type | 规定输入元素的类型 |
约束验证CSS伪类选择器：
选择器 | 描述 |
:disabled | 选取属性为 "disabled" 属性的 input 元素 |
:invalid | 选取无效的 input 元素 |
:optional | 选择没有"optional"属性的 input 元素 |
:required | 选择有"required"属性的 input 元素 |
:valid | 选取有效值的 input 元素 |
五、JavaScript 验证 API
5.1 约束验证 DOM 方法
属性 | 描述 |
checkValidity() | 如果 input 元素中的数据是合法的返回 true，否则返回 false。 |
setCustomValidity() | 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。 使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下： setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined) |
5.1.1 checkValidity()
个人理解这个api的作用是通过获取dom节点，验证节点内的限制元素，如果验证都通过那么返回true，如果存在未通过的则返回false。
<form name="myForm" method="post">
测试：<input name="myTest" type="number" min="100" max="300" required>
<button onclick="validateForm()">验证</button>
</form>
<script>
function validateForm() {
const test = document.forms["myForm"]["myTest"];
console.log(test.checkValidity());
}
</script>
5.1.2 setCustomValidity()
用于自定义表单校验元素内的验证自定义内容，在上文中已经有所提及就不赘述了。
5.2 约束验证 DOM 属性
属性 | 描述 |
validity | 布尔属性值，返回 input 输入值是否合法 |
validationMessage | 浏览器错误提示信息 |
willValidate | 指定 input 是否需要验证 |
5.3 Validity 属性
属性 | 描述 |
customError | 设置为 true, 如果设置了自定义的 validity 信息。 |
patternMismatch | 设置为 true, 如果元素的值不匹配它的模式属性。 |
rangeOverflow | 设置为 true, 如果元素的值大于设置的最大值。 |
rangeUnderflow | 设置为 true, 如果元素的值小于它的最小值。 |
stepMismatch | 设置为 true, 如果元素的值不是按照规定的 step 属性设置。 |
tooLong | 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。 |
typeMismatch | 设置为 true, 如果元素的值不是预期相匹配的类型。 |
valueMissing | 设置为 true，如果元素 (required 属性) 没有值。 |
valid | 设置为 true，如果元素的值是合法的。 |
上述两个特殊属性是在js获取节点之后校验的特殊属性，个人使用频率较少，仅作参考
