JavaScript 验证 API
约束验证 DOM 方法
| 财产 | 描述 |
|---|---|
| 检查有效性() | 如果输入元素包含有效数据，则返回 true。 |
| 设置自定义有效性（） | 设置输入元素的 validationMessage 属性。 |
如果输入字段包含无效数据，则显示一条消息：
checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">好的</button>
<p id="demo"></p>
<script>
函数 myFunction() {
const inpObj = document.getElementById("id1");
如果 (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
亲自尝试 »
约束验证 DOM 属性
| 财产 | 描述 |
|---|---|
| 有效性 | 包含与输入元素的有效性相关的布尔属性。 |
| 验证消息 | 包含当有效性为假时浏览器将显示的消息。 |
| 将验证 | 指示是否验证输入元素。 |
有效性属性
这 有效性属性 输入元素包含许多与数据有效性相关的属性：
| 财产 | 描述 |
|---|---|
| 自定义错误 | 如果设置了自定义有效性消息，则设置为 true。 |
| 模式不匹配 | 如果元素的值与其模式属性不匹配，则设置为 true。 |
| 范围溢出 | 如果元素的值大于其最大属性，则设置为 true。 |
| 范围下溢 | 如果元素的值小于其最小属性，则设置为 true。 |
| 步进不匹配 | 如果元素的值按照其步骤属性无效，则设置为 true。 |
| 太长 | 如果元素的值超出其 maxLength 属性，则设置为 true。 |
| 类型不匹配 | 如果元素的值根据其类型属性无效，则设置为 true。 |
| 缺少值 | 如果元素（具有必需属性）没有值，则设置为 true。 |
| 有效的 | 如果元素的值有效，则设置为 true。 |
例子
如果输入字段中的数字大于 100（输入的 max属性），显示一条消息：
rangeOverflow 属性
<input id="id1" type="number" max="100">
<button onclick="myFunction()">好的</button>
<p id="demo"></p>
<script>
函数 myFunction() {
让文本 = “值确定”;
如果（document.getElementById（“id1”）。validity.rangeOverflow）{
text = "值太大";
}
}
</script>
亲自尝试 »
如果输入字段中的数字小于 100（输入的 min 属性），显示一条消息：
rangeUnderflow 属性
<input id="id1" type="number" min="100">
<button onclick="myFunction()">好的</button>
<p id="demo"></p>
<script>
函数 myFunction() {
让文本 = “值确定”;
如果（document.getElementById（“id1”）。validity.rangeUnderflow）{
text = "值太小";
}
}
</script>
亲自尝试 »
