JavaScript 验证 API

vicky.yu

约束验证 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() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>
亲自试一试
约束验证 DOM 属性
属性        描述
validity        包含与输入元素有效性相关的布尔属性。
validationMessage        包含当有效性为 false 时浏览器将显示的消息。
willValidate        指示是否将验证 input 元素。
有效性属性
input 元素的有效性属性包含许多与数据有效性相关的属性：

属性        描述
customError        如果设置了自定义有效性消息，则设置为 true。
patternMismatch        如果元素的值与其 pattern 属性不匹配，则设置为 true。
rangeOverflow        如果元素的值大于其 max 属性，则设置为 true。
rangeUnderflow        如果元素的值小于其 min 属性，则设置为 true。
stepMismatch        如果元素的值对其 step 属性无效，则设置为 true。
tooLong        如果元素的值超过其 maxLength 属性，则设置为 true。
typeMismatch        如果元素的值对其 type 属性无效，则设置为 true。
valueMissing        如果元素（具有 required 属性）没有值，则设置为 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() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  }
}
</script>
亲自试一试
如果输入字段中的数字小于 100（input 元素的 min 属性），则显示一条消息：

rangeUnderflow 属性
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = = "Value OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  }
}
</script>
亲自试一试
Web API 简介
Web History API

JavaScript 和 HTML DOM 参考手册
JavaScript 实例
JavaScript 测验
JavaScript 高级教程

W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险