JavaScript、Html5——表单验证相关_采用pattern属性实现表单验证

目录

 一、基础泛用校验

二、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输入属性：

约束验证CSS伪类选择器：

五、JavaScript 验证 API

5.1 约束验证 DOM 方法

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 属性

5.3 Validity 属性

上述两个特殊属性是在js获取节点之后校验的特殊属性，个人使用频率较少，仅作参考