JavaScript 验证 API
JavaScript基础 2022-04-25 01:52:35小码哥的IT人生shichen
JavaScript 验证 API
约束验证 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>
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 验证</h1>
<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"></p>
<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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
约束验证 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>
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 验证</h1>
<p>请输入一个数字，然后单击“确定”：</p>
<input id="id1" type="number" max="100">
<button onclick="myFunction()">确定</button>
<p>如果数字大于 100（输入的 max 属性），则会显示错误消息。</p>
<p id="demo"></p>
<script>
function myFunction() {
let text;
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
} else {
text = "输入没问题";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果输入字段中的数字小于 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>
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 验证</h1>
<p>请输入一个数字，然后单击“确定”：</p>
<input id="id1" type="number" min="100">
<button onclick="myFunction()">确定</button>
<p>如果数字小于 100（输入的 min 属性），则会显示错误消息。</p>
<p id="demo"></p>
<script>
function myFunction() {
let text;
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "Value too small";
} else {
text = "输入没问题";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
