• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告

                  JavaScript validity 属性

                  2019-3-30 18:08| 作者: admin| 查看: 148| 评论: 0|来自: 蚂蚁部落

                  validity属性是HTML5新增,从名称来?#20174;?#35813;与表单验证相关。

                  事实也是如此,此属性可以返回一个包含验证相关信息的ValidityState对象。

                  HTML5为我们提供了实现简便表单验证的途径,但是简便的成本就是比较粗糙。

                  ?#27604;唬琀TML5也有能力根据需求定制表单验证规则与表现方式,那么对ValidityState掌握是必不可少的。

                  可以根据此对象获取当前表单的验证状态,从而定制不同的验证规则与验证表现方式,下面会分?#36739;?#32454;介绍。

                  语法结构:

                  [JavaScript] 纯文本查看 ?#31895;?#20195;码
                  v=dom.validity

                  参数解析:

                  (1).dom:一个表单元素对象。

                  (2).v:返回的ValidityState对象。

                  一.此属性的必要性:

                  前面提到过HTML5提供了非常简便的表单验证的方式,但是这些简便的方式缺点也非常明显。

                  首先通过一个简单的代码实例进行一下演示:

                  [HTML] 纯文本查看 ?#31895;?#20195;码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  body{margin:20px;}  
                  </style> 
                  <script>
                  window.onload=()=>{
                    let num=document.getElementById("num");
                    num.setCustomValidity("请输入3-8位数字");
                  }
                  </script>  
                  </head>
                  <body>
                  <form action="#" method="post">
                    <input type="text" id="num" pattern="^\d{3,8}$" required>
                    <input type="submit" id="bt" value="提交表单"/>
                  </form>
                  </body>
                  </html>

                  上述代码通过setCustomValidity方法自定义验证失败提示信息。

                  关于setCustomValidity方法更多内容参阅HTML5 setCustomValidity()自定义验证信息一章节。

                  但是我们可以发现一个问题,那就是无论文本框为空,还是内容填写格式错误,提示语言完全相同。

                  而实际应用中,通常期望根据不同的错误,给出相应明确提示,比如:

                  (1).内容为空:提示"文本框内容不能为空"。

                  (2).格式不对:提示"填写内容必须是3-8位数字"。

                  利用validity属性返回的ValidityState对象对当前验证状态进?#20449;?#26029;,然后定制不同的验证提示即可解决。

                  二.validity属性:

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

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

                  (1).validity:翻译成汉语具有"验证"的意思。

                  (2).state:翻译成汉语具有"状态"的意思。

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

                  代码实例如下:

                  [HTML] 纯文本查看 ?#31895;?#20195;码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  body{margin:20px;}  
                  </style> 
                  <script>
                  window.onload=()=>{
                    let num=document.getElementById("num");
                    let obt=document.getElementById("bt");
                    obt.onclick=()=>{
                      console.log(num.validity);
                    }
                  }
                  </script>  
                  </head>
                  <body>
                  <form action="#" method="post">
                    <input type="text" id="num" required>
                    <input type="submit" id="bt" value="提交表单"/>
                  </form>
                  </body>
                  </html>

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

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

                  a:3:{s:3:\"pic\";s:43:\"portal/201903/30/181033pp7ei1627r7te671.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

                  相关属性?#24471;?#22914;下:

                  (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表示未满足。

                  特别?#24471;?/span>:只要有一个地方不满足验证条件,valid属性值就为false。

                  那么我们就可以根据上述特点,优化一下我们前面的代码,达到验证错误信息精准提示的效果。

                  代码实例如下:

                  [HTML] 纯文本查看 ?#31895;?#20195;码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  body{margin:20px;}  
                  </style> 
                  <script>
                  window.onload=()=>{
                    let num=document.getElementById("num");
                    let obt=document.getElementById("bt");
                    obt.onclick=()=>{
                      let v = num.validity;
                      if(true === v.valueMissing){
                        num.setCustomValidity("字段不能为空");
                      }else{
                        if(true === v.patternMismatch){
                          num.setCustomValidity("请输入3-8位数字");
                        }else{
                          num.setCustomValidity("");
                        }
                      }
                    }
                  }
                  </script>  
                  </head>
                  <body>
                  <form action="#" method="post">
                    <input type="text" id="num" pattern="^\d{3,8}$" required>
                    <input type="submit" id="bt" value="提交表单"/>
                  </form>
                  </body>
                  </html>

                  上面的代码实现了不同错误,给出不同错误提示的功能。

                  代码简单分析如下:

                  (1).true === v.valueMessing为真,?#24471;?#24403;前文本框为空,没有填写任?#25991;?#23481;,也就是违反了required必需性验证,那么通过setCustomValidity方法自定义错误提示信息为"字段不能为空"。

                  (2).true === v.patternMismatch为真,?#24471;?#24403;前输入的内容不符合pattern属性规定正则表达式的限定,那么通过setCustomValidity方法自定义错误提示信息为"请输入3-8位数字"。

                  通过对validity属性的良好掌握,可以让我们对HTML5验证基本做到知其然知其所以然的目的,不但可以灵活自定义验证效果,由此也能达到心里比较敞亮的功效,可能对延长寿命有一定帮助。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>