概述
表单验证。
内容
验证时机
在非 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}'/>