JavaScript 表单验证


目录

    显示目录


约束验证 DOM 方法

checkValidity()

如果输入元素包含有效数据,则返回 true。

setCustomValidity()

设置输入元素的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>

<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>

约束验证 DOM 属性

validity

包含与输入元素的有效性相关的布尔属性。

validationMessage

包含当有效性为 false 时浏览器将显示的消息。

willValidate

指示是否将验证输入元素。



有效性属性

输入元素的有效性属性包含一个数字 与数据有效性相关的属性:

customError

如果设置了自定义有效性消息,则设置为 true。

patternMismatch

如果元素的值与其模式属性不匹配,则设置为 true。

rangeOverflow

如果元素的值大于其 max 属性,则设置为 true。

rangeUnderflow

如果元素的值小于其 min 属性,则设置为 true。

stepMismatch

如果元素的值根据其步骤属性无效,则设置为 true。

tooLong

如果元素的值超过其 maxLength 属性,则设置为 true。

typeMismatch

如果元素的值根据其类型属性无效,则设置为 true。

valueMissing

如果元素(具有必需属性)没有值,则设置为 true。

valid

如果元素的值有效,则设置为 true。


例子

如果输入字段中的数字大于 100(输入的 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>

<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 属性),则显示一条消息:

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>

<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>