JavaScript 验证 API -HTML教程 -css5.net


JavaScript 验证 API


一、约束验证 DOM 方法

PropertyDescription
checkValidity()假如 input 元素中包含有效数据 返回 true,。
setCustomValidity()

配置 input 元素的 validationMessage 属性,用于定义错误提醒信息的办法。

示例代码要是输入字段包括失效的数据,会返回错误信息:

checkValidity() 使用方法

<input id="id1" type="number" min="100" max="300" required>

<button onclick="myFunction()">提交验证</button>


<p id="demo"></p>


<script>

function myFunction() {

   var inpObj = document.getElementById("id1");

   if (inpObj.checkValidity() == false) {

       document.getElementById("demo").innerHTML = inpObj.validationMessage;

   }

}

</script>


演示一下

二、约束验证 DOM 属性

属性描述
validity布尔值,包括与 input 元素的合法性关联
validationMessage浏览器的错误提示
willValidate指示能否验证 input 元素

三、input 元素的 validity 属性

input 元素的 validity 属性包括了与数据合法性关联的一系列 validity 属性:

属性描述
customError设置为 true, 假如设置自定义的合法性信息。
patternMismatch设置为 true, 假如元素的值不匹配它的pattern属性。
rangeOverflow设置为 true, 假如元素的值大于配置的非常大的值。
rangeUnderflow设置为 true, 假如元素的值小于它的非常小值。
stepMismatch设置为 true, 不是根据划定的 step 属性。
tooLong设置为 true, 假如元素的值跨越了 maxLength 属性配置的长度。
typeMismatch设置为 true, 不是预期相匹配的范例。
valueMissing设置为 true,假如元素 (required) 没有值。
valid设置为 true,假如元素的值是有效的。

四、示例代码

假如输入的数字大于 100,则显现一个信息:

rangeOverflow 属性

<input id="id1" type="number" max="100">

<button onclick="myFunction()">验证一下</button>


<p id="demo"></p>


<script>

function myFunction() {

   var txt = "";

   if (document.getElementById("id1").validity.rangeOverflow) {

      txt = "你输入的值非常大";

   }

   document.getElementById("demo").innerHTML = txt;

}

</script>


演示一下

假如输入的数字小于 100,则显现一个信息:

rangeUnderflow 属性

<input id="id1" type="number" min="100" required>

<button onclick="myFunction()">OK</button>


<p id="demo"></p>


<script>

function myFunction() {

   var txt = "";

   var inphk = document.getElementById("id1");

  if (inphk.validity.rangeUnderflow) {

       txt = "你输入的值非常小";

   } else {

       txt = "你的输入正确";

   }

   document.getElementById("demo").innerHTML = txt;

}


</script>


演示一下


五、相关参考文章

网站品质:HTML translate 属性

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved