前端学习（七十六） DOM-表单验证（Dom）

表单验证

提交数据前对用户输入进行验证

这类验证通常验证的是格式是否正确，比如是否输入了正确的邮箱地址，手机号码等信息

优点：

当输入有误时及时的提醒用户，优化用户体验。

提前避免部分服务器不能处理的格式，过滤掉部分不安全数据。

表单验证的类型

表单元素的内置验证
表单验证API
自定义验证

表单元素的内置验证

通过设置表单元素的校验属性进行验证

当元素通过校验时

元素可以通过:valid伪类进行样式定制
可以成功提交表单

当元素未通过校验

元素可以通过:invalid伪类进行样式定制
浏览器将不会提交表单

常用的表单元素内置验证

requeired：表单元素的值不能为空

<input id="user" type="text" class="user" required>

pattern：使用正则表达式进行验证

<input id="user" type="text" class="user" required pattern="^1[0-9]{10}$">

minlenghth&maxlength：内容长度校验（maxlength限制了长度的输入）

<input id="password" type="password" class="user" maxlength="2">

min&max 数字大小校验（设置type为number时可设置，限定上限和下限）

<input id="age" type="number" class="user" min="1" max="10">

表单验证的API

属性

validationMessage：元素不满足验证条件时的文本信息

validity：元素的验证状态，包含以下属性

valid：验证通过

valueMissing：元素设置了required属性，但值为空
typeMismatch：元素的值不符合指定类型
patternMismatch：是否value与pattern不匹配
stepMismatch：元素的值是否不符合step指定的值
tooLong/tooShort：元素的值是否超过设定的最大长度/小于设置的最小长度
rangeOverflow / rangeUnderflow：元素的值是否大于max指定的值/小于min指定的值
badInput：输入不完整
customError：是否设置了自定义错误

willValidate：元素在表单提交时是否被验证

方法

checkValidity()：进行验证并返回验证结果（true/false）

setCustomValidity(message)：设置元素的错误信息

事件

invalid：验证元素无效时触发（即时表单验证自带验证被关闭了，也就是被设置了novalidate，也会生效的）

示例：

        <form name="login" id="login" novalidate>
            <div>
                <label for="email">邮箱</label>
                <input id="email" type="email" class="user" required>
            </div>
            <div>
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </div>
        </form>
        <script>
            var forms=document.getElementById('login');
            forms.addEventListener('submit',function(event){
                console.log(forms.checkValidity());
                
                if(!forms.checkValidity()){
                    alert("格式不正确")
                }
            })
        </script>

另外也可以自定义验证（推荐，因为内置的API不能满足实际开发需求）

        <script>
            var forms=document.getElementById('login');
            forms.addEventListener('submit',function(event){
                console.log(forms.checkValidity());
                
                if(/*验证规则*/){
                    alert("格式不正确")
                }
            })
        </script>

前端学习（七十六） DOM-表单验证（Dom）

猜你喜欢