小码哥的IT人生

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

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024