HTML 表单验证

概述

表单验证。

内容

验证时机

在非 ajax 提交的情况下通常在 form 的 submit 事件处理函数中进行验证。

form.onsubmit=()=>
{
/*验证*/
return true;        //若返回 true，则表示验证成功，表单提交；若返回 false，则验证失败，表单补提交。
};

注意：调用 form 的 submit 方法不触发 submit 事件。表单验证的方法不能使用 addEventListener 添加，因为这样添加的事件处理函数是整个事件处理函数的一部分，其返回值不能作为整体返回值，应使用 onsubmit。

input自动验证

input 标签的一些属性可以自动在提交前验证内容，若验证不成功则会有所提示，且 CSS 伪类 :invalid 生效；若验证成功则 CSS 伪类 :valid 生效。

required

required 属性使得 input 必须填写。

示例：

<input required/>

pattern

pattern 的属性值为正则表达式，若 input 输入内容不符合正则表达式则验证不通过。

示例（要求输入 8 位数字）：

<input type='text' pattern='\d{8}'/>