如果输入元素包含有效数据,则返回 true。
设置输入元素的validationMessage属性。
如果输入字段包含无效数据,则显示一条消息:
<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>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p>If the number is less than 100 or greater than 300, an error message will be displayed.</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>
包含与输入元素的有效性相关的布尔属性。
包含当有效性为 false 时浏览器将显示的消息。
指示是否将验证输入元素。
输入元素的有效性属性包含一个数字 与数据有效性相关的属性:
如果设置了自定义有效性消息,则设置为 true。
如果元素的值与其模式属性不匹配,则设置为 true。
如果元素的值大于其 max 属性,则设置为 true。
如果元素的值小于其 min 属性,则设置为 true。
如果元素的值根据其步骤属性无效,则设置为 true。
如果元素的值超过其 maxLength 属性,则设置为 true。
如果元素的值根据其类型属性无效,则设置为 true。
如果元素(具有必需属性)没有值,则设置为 true。
如果元素的值有效,则设置为 true。
如果输入字段中的数字大于 100(输入的 max
属性),显示一条消息:
<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>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>
<p id="demo"></p>
<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
属性),则显示一条消息:
<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>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>
<p id="demo"></p>
<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>