JavaScript 验证 API

约束验证 DOM 方法

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

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

checkValidity() 方法

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 验证</h2>
<p>输入一个数字，然后单击 OK:</p>
<input id="id1" type="number" min="100" max="300" required="">
<button onclick="myFunction()">OK</button>
<p>如果数字小于 100 或大于 300，将显示错误消息。</p>
<p id="demo">
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  }
}
</script>
</body>
</html>

运行一下

约束验证 DOM 属性

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

有效性

输入元素的 validity 属性包含许多与数据有效性相关的属性:

属性	描述
customError	如果设置了自定义有效性消息，则设置为 true
patternMismatch	如果元素的值与其模式属性不匹配，则设置为 true
rangeOverflow	如果元素的值大于其 max 属性，则设置为 true
rangeUnderflow	如果元素的值小于其 min 属性，则设置为 true
stepMismatch	如果元素的每个 step 属性的值无效，则设置为 true
tooLong	如果元素的值超过其 maxLength 属性，则设置为 true
typeMismatch	如果元素的值对于其 type 属性无效，则设置为 true
valueMissing	如果元素（具有必需属性）没有值，则设置为 true
valid	如果元素的值有效，则设置为 true

实例

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

rangeOverflow 属性

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 验证</h2>
<p>输入一个数字，然后单击 OK:</p>
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p>如果数字大于 100（输入的 max 属性），将显示错误消息。</p>
<p id="demo">
<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

运行一下

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

rangeUnderflow 属性

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 验证</h2>
<p>输入一个数字，然后单击 OK:</p>
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p>如果数字小于100（输入的最小属性），将显示错误消息。</p>
<p id="demo">
<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

运行一下

JavaScript 验证 API

约束验证 DOM 方法

checkValidity() 方法

约束验证 DOM 属性

有效性

实例

rangeOverflow 属性

rangeUnderflow 属性

分类导航