JavaScript验证 api

约束验证DOM方法

属性	描述
checkValidity()	如果输入元素包含有效数据，则返回true.
setCustomValidity()	设置一个输入元素的validationMessage属性.

如果输入字段包含无效数据，则显示消息:

<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() == false) {
          document.getElementById("demo").innerHTML = inpObj.validationMessage;
      }
  }
</script>

让我试试

约束验证DOM属性

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

验证属性

验证属性 输入元素包含一些与数据有效性相关的属性:

属性	描述
customError	设置为true，如果设置自定义有效性消息.
patternMismatch	如果元素的值与其模式属性不匹配，则设置为true。
rangeOverflow	如果元素的值大于它的最大属性，则设置为true。
rangeUnderflow	如果元素的值小于它的最小属性，则设置为true。
stepMismatch	如果元素的值按其步骤属性无效，则设置为true。
tooLong	设置为true，如果一个元素的值超过MaxLength属性。
typeMismatch	如果元素的值按其类型属性无效，则设置为true。
valueMissing	设置为true，如果元素（具有必需属性）没有值。
valid	设置为true，如果元素的值是有效的。

实例

如果输入字段中的数字大于100（输入框的max属性），则显示一条消息:

<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（输入框的min属性），则显示一条消息:

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

让我试试