首页 网络技术
  1. 正文

JavaScript约束验证DOM属性实例分析

  约束验证 DOM 属性

  validity:布尔属性值,返回 input 输入值是否合法

  validationMessage:浏览器错误提示信息

  willValidate:指定 input 是否需要验证

  Validity 属性

  input 元素的 validity 属性包含一系列关于 validity 数据属性:

  customError:设置为 true, 如果设置了自定义的 validity 信息。

  patternMismatch:设置为 true, 如果元素的值不匹配它的模式属性。

  rangeOverflow:设置为 true, 如果元素的值大于设置的最大值。

  rangeUnderflow:设置为 true, 如果元素的值小于它的最小值。

  stepMismatch:设置为 true, 如果元素的值不是按照规定的 step属性设置。

  tooLong:设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。

  typeMismatch:设置为 true, 如果元素的值不是预期相匹配的类型。

  valueMissing:设置为 true,如果元素 (required 属性) 没有值。

  valid:设置为 true,如果元素的值是合法的。

  实例

  如果输入的值大于 100,显示一个信息:

  rangeOverflow 属性

  <input id="id1" type="number" max="100">

  <button onclick="myFunction()">验证</button>

  <pid="demo"></p>

  <script>

  function myFunction() {

  var txt = "";

  if (document.getElementById("id1").validity.rangeOverflow) {

  txt = "输入的值太大了";

  }

  document.getElementById("demo").innerHTML = txt;

  }

  </script>

本文标题:JavaScript约束验证DOM属性实例分析
本文链接:https://www.qqooo.cn/post/6850.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!