橘子味的心
标题: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>

让我试试


目录

分类