devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5表单验证_html5 表单验证

作者：从前慢现在也慢 | 2024-02-18 22:21:48

赞

踩

html5 表单验证

HTML5表单验证

表单验证的两种方式：

  1. form表单提交到后台（学习这个）

  2. 无刷新页面的ajax提交（之前做过）

 

HTML5约束验证API

  1. willValidate属性

    willValidate: 指定 input 是否需要验证 willValidate属性 该属性获取一个布尔值，表示表单元素是否需要验证。如果表单元素设置了required特性或pattern特性，则willValidate属性的值为true，即表单的验证将会执行。仍然以一个id特性为"username"的表单元素为例，willValidate属性的使用方法如下：

    1. var willValidate=document.getElementById(“username”).willValidate;
    2. console.log(willValidate);//true

     

  2. validity属性

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

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

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

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

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

     

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

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

    181033pp7ei1627r7te671.pnguploading.4e448015.gif转存失败重新上传取消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。

  3. validationMessage属性

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

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

     

  4. checkValidity()属性

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

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

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

  5. setCustomValidity属性

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

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

     

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

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

 

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

  1. :require和:optional 必须填和选填

  2. :in-range和:out-of-range 在范围和不在范围

  3. :valid和:invalid 输入内容符合格式要求和不符合格式要求

  4. :read-only和:read-write 只读和只写

 

表单验证事件

  1. oninput事件，input输入时触发

  2. oninvalid事件，验证不通过时触发

  3. onchange事件，会在域的内容改变时发生。

    支持该事件的 HTML 标签：

    <input type="text">, <select>, <textarea>

    支持该事件的 JavaScript 对象：

    fileUpload, select, text, textarea

 

默认气泡修改

  1. <!DOCTYPE >
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style>
  7.             .oneline{
  8.                 line-height: 1.5;
  9.                 margin: 10px auto;
  10.             }
  11.             .oneline label{
  12.                 width: 100px;
  13.                 text-indent: 15px;
  14.                 font-size: 14px;
  15.                 font-family: "微软雅黑";
  16.                 display: inline-block;
  17.             }
  18.             .oneline input[type='submit']{
  19.                 margin-left: 20px;
  20.                 width: 80px;
  21.                 height: 30px;
  22.                 border: 0;
  23.                 background: #5899d0;
  24.                 color: #fff;
  25.                 font-size: 14px;
  26.                 border-radius: 6px;
  27.                 
  28.             }
  29.             .error-message{
  30.                 color: red;
  31.                 font-size: 12px;
  32.                 text-indent: 108px;
  33.             }
  34.         </style>
  35.     </head>
  36.     <body>
  37.         <form action="" method="post" enctype="multipart/form-data" autocomplete="off" id="forms"><!--type为file的时候用这个enctype-->
  38.             <div class="oneline">
  39.                 <label for="name">用户名</label>
  40.                 <input id="name" name="name" class="sinput" required="required" />
  41.             </div>
  42.             <div class="oneline">
  43.                 <label for="email">Email：</label>
  44.                 <input id="email" name="email" class="sinput" required="required" type="email"/>
  45.             </div>
  46.             <div class="oneline">
  47.                 <input type="submit" value="提交" id="thesubmit" />
  48.             </div>
  49.         </form>
  50.         <script>
  51.             
  52.             function replaceInvalidityUi(form){
  53.                 form.addEventListener('invalid',function(event){//验证不通过时阻止默认事件
  54.                     event.preventDefault();
  55.                 },true)
  56.                 form.addEventListener('submit',function(event){
  57.                     if(!this.checkValidity()){//验证不通过时，阻止提交
  58.                         event.preventDefault();
  59.                     }                   
  60.                 },true)
  61.                 
  62.                 var submitBtn=document.getElementById('thesubmit');
  63.                 submitBtn.addEventListener('click',function(event){
  64.                     console.log(email.validationMessage);
  65.                     var invalidityField=form.querySelectorAll(':invalid'),//获取所有不符合格式的元素节点
  66.                     errorMessage=form.querySelectorAll('.error-message'),
  67.                     parent;
  68.                     
  69.                     for(var i=0;i<errorMessage.length;i++){//移除表单验证提示信息
  70.                         errorMessage[i].parentNode.removeChild(errorMessage[i]);
  71.                     }
  72.                     
  73.                     for(var i=0;i<invalidityField.length;i++){//添加表单验证图示信息
  74.                         parent=invalidityField[i].parentNode;
  75.                         console.log(invalidityField[i].validationMessage);
  76.                         parent.insertAdjacentHTML('beforeend','<div class="error-message">'+invalidityField[i].validationMessage+'</div>');
  77.                     }
  78.                     if(invalidityField.length>0){//点击提交后，如果有表单验证提示，就把焦点放在有错误的第一个表单验证元素中
  79.                         invalidityField[0].focus();
  80.                     }
  81.                 })
  82.             }
  83.             var form=document.getElementById('forms');
  84.             replaceInvalidityUi(form);
  85.         </script>
  86.     </body>
  87. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/110937
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号