• <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>

                  广告

                  HTML5 setCustomValidity()自定义验证信息

                  2019-3-29 21:46| 作者: admin| 查看: 145| 评论: 0|来自: 蚂蚁部落

                  表单是网页的核心之一,前端表单验证自然是一项重要的工作。

                  此工作是网站优化的一部分,由于不通过服务器,所以能以较快的响应速度给用户提示。

                  HTML5之前,前端表单验证主要利用原生JavaScript或者相关插件,相对较为繁琐。

                  随着版本演进,HTML5提供了更为便捷的前端表单验证方式,像是快餐,可以完全不用JavaScript。

                  快餐虽然很便捷,但是味道未必好,就如同现在不努力,确实比较逍遥,未来可能会比较辛苦。

                  默认的验证信息提示语言都是固定的,非常的不友好,看如下代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  body{margin:20px;}  
                  </style> 
                  <script>
                  </script>  
                  </head>
                  <body>
                  <form action="#" method="post">
                    <input type="text" pattern="^\d{3,8}$" required>
                    <input type="submit" id="bt" value="提交表单"/>
                  </form>
                  </body>
                  </html>

                  上述代码通过pattern属性规定文本框输入的内容必须是3到8位数字。

                  当输入的内容不符合规则的时候,提交表单弹出的提示信息是完全一样的。

                  弹出信息截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201903/29/214724pgden9zedoqzbged.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  通常应该弹出期待输入信息的格式,而不是这种基本上毫无价值的信息。

                  HTML5提供了相关的解决方案,使用setCustomValidity方法自定义即可。

                  此方法属于对应的表单元素,赋予的参数?#23548;?#26159;我们所期待的验证失败时的提示语。

                  上述代码修改如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!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方法自定义了演示失败提示语。

                  当文本框没有填写任?#25991;?#23481;的时候,点击提交按钮的提示语截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201903/29/214811wm24hzv788tjy282.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  当文本框输入内容格式不匹配时候,点击提交按钮的提示语截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201903/29/214820nw1ftnb9uu1n1pb3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  两个提示语完全相同,通常情况下,如果没有填写内容那么给出的提示应该是"不能为空"之类的。

                  如果填写格式不对,那么给出的提示语才是"请输入3-8位数字",也就是?#23548;?#21333;的通过setCustomValidity方法设置提示语,虽然在一定程度?#19979;?#36275;了需求,但是会将各种场景的提示语都统一为一种,不人性化。如果HTML5验证功能的能力仅此而已,那就实在太鸡肋的,没有让我们失望,可以根据不同的错误类型来定义提示语。

                  上述代码修改如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!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.valueMessing){
                        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>

                  上面代码完美实现了根据不同的表单错误,给出相应提示语的效果。

                  表单元素对象有一个validity属性,它可以返回一个对象,此对象包含各种类型验证失败的判断功能。

                  比如表单必需性验证失败,那么此对象的valueMessing属性返回值为true,输入的格式不匹配,那么对象的patternMismatch属性返回值为true,根据这个特点,可以实现验证不同错误类型,给出不同的错误提示的功能。关于validity属性的更多内容可以参阅validity 属性一章节。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                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>

                                                            香港六合彩波表 新手怎幺投注青海快三 十一选五浙江十一选五走势图 七星彩预测i爱彩网 不中大奖古诗 连码三全中是什么数字 彩票app模板 体彩河北11选5开奖结果查询结果 五子棋大师2电脑版 上海时时彩开奖历史 斯诺克海口公开赛 3d如何判断出组三 河北11选5组三中多少钱 陕西11选5可以破解吗 电子游戏ppt