上一节:

  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>
    尝试一下
上一节: