HTML5表单验证

最新推荐文章于 2024-03-23 13:17:33 发布

小青龙8085

最新推荐文章于 2024-03-23 13:17:33 发布

阅读量1k

点赞数

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/105048581

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

HTML5表单验证

表单验证的两种方式：

form表单提交到后台（学习这个）
无刷新页面的ajax提交（之前做过）

HTML5约束验证API

willValidate属性

willValidate: 指定 input 是否需要验证 willValidate属性该属性获取一个布尔值，表示表单元素是否需要验证。如果表单元素设置了required特性或pattern特性，则willValidate属性的值为true，即表单的验证将会执行。仍然以一个id特性为"username"的表单元素为例，willValidate属性的使用方法如下：
```
var willValidate=document.getElementById(“username”).willValidate;
console.log(willValidate);//true
```
validity属性

表单元素对象具有此属性，返回值是一个ValidityState对象。

ValidityState对象的名称是合成词，如有两个单词构成：

（1）.validity：翻译成汉语具有"验证"的意思。

（2）.state：翻译成汉语具有"状态"的意思。

顾名思义，此对象包含有表单元素与验证状态相关的信息。

当文本框内容为空的时候，点击提交按钮会弹出一个验证失败提示。

此时ValidityState对象包含了相关信息，截图如下：

转存失败重新上传取消 $a:3:{s:3:\"pic\";s:43:\"portal/201903/30/181033pp7ei1627r7te671.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

此对象具有多个属性，属性值代表着当前表单元素的相关验证状态。

相关属性说明如下：

（1）.badInput：标识当前输入是否是无效输入，比如number控件，输入的却是字符串，true表示无效输入。

（2）.customError ：标识当前是否是自定义验证错误信息，true表示是。

（3）.patternMismatch：标识输入内容是否与pattern规定的规则匹配，true表示是。

（4）.rangeOverflow：标识输入的数值是否超过max属性限制，true表示超过。

（5）.rangeUnderflow：标识输入的数值是否小于min属性限制，true表示小于。

（6）.stepMismatch：标识输入的数值是否符合step属性限制，true表示不符合。

（7）.tooLong：标识输入的字符串长度是否超过maxlength属性限制，true表示超过。

（8）.tooShort：标识输入的字符串长度是否小于minlength属性限制，true表示小于。

（9）.typeMismatch：标识输入的内容是否格式不符合规定，不符合url或者email等限制，true表示不符合。

（10）.valid：标识当前表单输入是否完全符合要求，true表示满足。

（11）.valueMissing ：标识当前表单元素未满足required要求，true表示未满足。

特别说明：只要有一个地方不满足验证条件，valid属性值就为false。

validationMessage属性

显示表单元素错误提示信息

console.log(email.validationMessage);//请在电子邮件地址中包括“@”。“1”中缺少“@”。

checkValidity()属性

如果元素所有约束条件都满足了才会返回true，否则返回false

        <form action="" method="post" enctype="multipart/form-data" autocomplete="off">!--type为file的时候用这个enctype-->
            <input type="email" id="number" value=''/>
        </form>
        <script>
            if(number.checkValidity()){
                console.log('符合');
            }else{
                console.log('不符合')
            }
        </script>

当value中的值符合邮箱的格式时，返回true，控制台输出符合，否则输出不符合

setCustomValidity属性

设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。意思就是当输入的内容不符合预定的格式的时候的提示信息。

        <form action="" method="post" enctype="multipart/form-data" autocomplete="off">
            <input type="text" required="required" pattern="^\d{4}$" oninput="checkit(this)" placeholder="请输入4个数字"/><!--oninput事件用户输入时触发，this指的是这个input-->
            <input type="submit"/>
        </form>
        <script>
            function checkit(obj){//obj指的是this
                console.log(obj.validity);
                var it=obj.validity;
                if(it.valueMissing===true){
                    obj.setCustomValidity("不能为空");
                }else if(it.patternMismatch===true){
                    obj.setCustomValidity("必须是四个数字！");
                }else{
                    obj.setCustomValidity("");
                }
            }
        </script>

消除type为number、search的input标签的默认样式

            input[type='search']::-webkit-search-cancel-button{
                -webkit-appearance: none;/*将搜索框最右边的叉号弄没*/
                height: 15px;/*将搜索框最右边代替为宽高都为15px的红色，这种做法在pc端没事，但在手机端可能会出现兼容问题，在手机端可以用绝对定位的div代替该功能*/
                width: 15px;
                background: red;
            }
            input[type=number]::-webkit-inner-spin-button,/*消除type=number的input框中的上下加按钮*/
            input[type=number]::-webkit-outer-spin-button{
                -webkit-appearance: none;
                margin: 0;
            }

表单验证的伪类及css选择器

:require和:optional 必须填和选填
:in-range和:out-of-range 在范围和不在范围
:valid和:invalid 输入内容符合格式要求和不符合格式要求
:read-only和:read-write 只读和只写

表单验证事件

oninput事件，input输入时触发
oninvalid事件，验证不通过时触发
onchange事件，会在域的内容改变时发生。

支持该事件的 HTML 标签：
```
<input type="text">, <select>, <textarea>
```
支持该事件的 JavaScript 对象：
```
fileUpload, select, text, textarea
```

默认气泡修改

<!DOCTYPE >
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .oneline{
                line-height: 1.5;
                margin: 10px auto;
            }
            .oneline label{
                width: 100px;
                text-indent: 15px;
                font-size: 14px;
                font-family: "微软雅黑";
                display: inline-block;
            }
            .oneline input[type='submit']{
                margin-left: 20px;
                width: 80px;
                height: 30px;
                border: 0;
                background: #5899d0;
                color: #fff;
                font-size: 14px;
                border-radius: 6px;
                
            }
            .error-message{
                color: red;
                font-size: 12px;
                text-indent: 108px;
            }
        </style>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data" autocomplete="off" id="forms"><!--type为file的时候用这个enctype-->
            <div class="oneline">
                <label for="name">用户名</label>
                <input id="name" name="name" class="sinput" required="required" />
            </div>
            <div class="oneline">
                <label for="email">Email：</label>
                <input id="email" name="email" class="sinput" required="required" type="email"/>
            </div>
            <div class="oneline">
                <input type="submit" value="提交" id="thesubmit" />
            </div>
        </form>
        <script>
            
            function replaceInvalidityUi(form){
                form.addEventListener('invalid',function(event){//验证不通过时阻止默认事件
                    event.preventDefault();
                },true)
                form.addEventListener('submit',function(event){
                    if(!this.checkValidity()){//验证不通过时，阻止提交
                        event.preventDefault();
                    }                   
                },true)
                
                var submitBtn=document.getElementById('thesubmit');
                submitBtn.addEventListener('click',function(event){
                    console.log(email.validationMessage);
                    var invalidityField=form.querySelectorAll(':invalid'),//获取所有不符合格式的元素节点
                    errorMessage=form.querySelectorAll('.error-message'),
                    parent;
                    
                    for(var i=0;i<errorMessage.length;i++){//移除表单验证提示信息
                        errorMessage[i].parentNode.removeChild(errorMessage[i]);
                    }
                    
                    for(var i=0;i<invalidityField.length;i++){//添加表单验证图示信息
                        parent=invalidityField[i].parentNode;
                        console.log(invalidityField[i].validationMessage);
                        parent.insertAdjacentHTML('beforeend','<div class="error-message">'+invalidityField[i].validationMessage+'</div>');
                    }
                    if(invalidityField.length>0){//点击提交后，如果有表单验证提示，就把焦点放在有错误的第一个表单验证元素中
                        invalidityField[0].focus();
                    }
                })
            }
            var form=document.getElementById('forms');
            replaceInvalidityUi(form);
        </script>
    </body>
</html>

小青龙8085

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5表单验证

HTML5表单验证表单验证的两种方式： form表单提交到后台（学习这个）无刷新页面的ajax提交（之前做过） HTML5约束验证API willValidate属性 willValidate: 指定 input 是否需要验证 willValidate属性该属性获取一个布尔值，表示表单元素是否需要验证。如果表单元素设置了required特性或patter...
复制链接

扫一扫