JavaScript、Html5——表单验证相关

目录

 一、基础泛用校验

二、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获取节点之后校验的特殊属性，个人使用频率较少，仅作参考