JavaScript 表单API

  • 约束验证DOM方法

    方法 描述
    checkValidity() 如果input元素包含有效数据,则返回true。
    setCustomValidity() 设置input元素的validationMessage属性。
    如果输入字段包含无效数据,则显示以下消息:(checkValidity()方法)
    <input id="id1" type="number" min="100" max="300" required>
    <button onclick="myFunction()">OK</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
      var inpObj = document.getElementById("id1");
      if (!inpObj.checkValidity()) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
      }
    }
    </script>
    尝试一下
  • 约束验证DOM属性

    属性 描述
    validity 包含与input元素的有效性相关的布尔属性。
    validationMessage 包含当有效性为false时浏览器将显示的消息。
    willValidate 指示是否验证input元素。
  • 有效性

    input元素的validity属性包含许多与数据有效性相关的属性:
    属性 描述
    customError 如果设置了自定义有效性消息,则设置为true。
    patternMismatch 如果元素的值与其pattern属性不匹配,则设置为true。
    rangeOverflow 如果元素的值大于其max属性,则设置为true。
    rangeUnderflow 如果元素的值小于其min属性,则设置为true。
    stepMismatch 如果元素的值对于其step属性无效,则设置为true。
    tooLong 如果元素的值超过其maxLength属性,则设置为true。
    typeMismatch 如果元素的值对于其type属性无效,则设置为true。
    valueMissing 如果元素(具有必需属性)没有值,则设置为true。
    valid 如果元素的值有效,则设置为true。

    例子

    如果输入字段中的数字大于100(input的max属性),则显示一条消息:
    rangeOverflow属性
    <input id="id1" type="number" max="100">
    <button onclick="myFunction()">OK</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
      var txt = "";
      if (document.getElementById("id1").validity.rangeOverflow) {
        txt = "Value too large";
      }
      document.getElementById("demo").innerHTML = txt;
    }
    </script>
    尝试一下
    如果输入字段中的数字小于100(input的min属性),则显示一条消息:
    rangeUnderflow属性
    <input id="id1" type="number" min="100">
    <button onclick="myFunction()">OK</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
      var txt = "";
      if (document.getElementById("id1").validity.rangeUnderflow) {
        txt = "Value too small";
      }
      document.getElementById("demo").innerHTML = txt;
    }
    </script>
    尝试一下