zoukankan      html  css  js  c++  java
  • html5表单验证反馈

    表单验证:

      validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,否则返回false

        - oText.addEventListener("invalid",fn1,false); // invalid 验证反馈事件

          - ev.preveDefault() // 阻止默认验证

        - valueMissing:输入值为空时

        - typeMismatch:控件值与预期类型不匹配

        - patternMismatch:输入值不满足pattern正则

        - tooLong:超过maxLength最大限制

        - rangeUnderflow:验证的range最小值

        - rangeOverflow:验证的range最大值

        - stepMismatch:验证的range的当前值是否符合min、max及step的规则

        - customError 不符合自定义验证

             >> setCustomValidity(); 自定义验证

    <form>
      <input type="text" id="text" name="user"
         placeholder="请输入4-16个字符"
         required
         pattern="d{1,5}"
         maxlength = "5"
         
       />
      <input type="range" max="5" min="0" step="2" />
      <input type="submit" formnovalidate/> // formnovalidate关闭表单验证
    </form>
    
    <script>
    var oText=document.getElementById("text");
    oText.addEventListener("invalid",fn,false); // lnvalid事件:验证反馈
      // ev.preventDefault 阻止默认验证
    oText.oninput=function() { // oninput事件
      if(this.value === "敏感词"){ // 自定义事件
        this.setCustomValidity("请不要输入敏感词");
      } else {
        this.setCustomValidity(""); // 必须清空
      }
    }
    
    function fn() {
      // 存储表单反馈信息对象
      console.log(this.validity)
      // valid查看验证是否通过 boolean值
      console.log(this.validity.valid)
      console.log(this.validity.valueMissing); //前提具有required 输入为空时候返回true。
    }
    //typeMismatch、patternMismatch、customError 与valueMissing一样
    当条件不被满足时,返回为true,反之,返回false。
    ------- 意义不大 ------- // tooLong 超过了maxLength最大值,open浏览器下为true,其余浏览器可能不支持(或返回false),
    且设置maxLength后正常输入无法超过maxLength设置的长度,
    代码可以oText.value = "123456" ...
    注意将input类型换成email类型方便查看
    // rangeUnderflow、rangeOverflow、stepMismatch 与tooLong类似 // 当八项内容都为false时,this.validity.valid返回true。
    当八项有一项为true,this.validity.valid返回false。
    </script>
  • 相关阅读:
    android之手机震动Vibrate
    Android中Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现) .
    用AutoCompleteTextView实现历史记录提示
    AutoCompleteTextView
    android学习笔记7--------MVC设计模式
    Android之MVC模式
    Android中常见的MVC模式
    //11个整数的手机号码正则式 phoneNumber(String number)
    YuvImage知识点总结
    运行项目的时候出现missing frature:WATCH
  • 原文地址:https://www.cnblogs.com/wssjzw/p/9292066.html
Copyright © 2011-2022 走看看