html5 自定义验证信息

扶醉桌前 提交于 2020-03-09 00:40:50

 

 

h5 为表单新增了很多类型,及属性。

根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数,这些验证表单的函数都存在了ValidityState对象中,接下来让我们一起来了解一下这些函数的用法:

 

ValidityState对象

ValidityState对象是通过validity 属性获取的,该对象有8个属性,分别针对8个方面的错误验证,属性值均为布尔值。

1.valueMissing属性

必填的表单元素的值为空。

如果表单元素设置了required特性,则为必填项。如果必填项的值为空,就无法通过表单验证,valueMissing属性会返回true,否则返回false。

复制代码
<input id="inp1" type="text" value="foo" required/>
<input id="inp2" type="text" value="" required/>
<script type="text/javascript">
    document.getElementById('inp1').validity.valueMissing; //false
    document.getElementById('inp2').validity.valueMissing; //true
</script>
复制代码

 

2.typeMismatch属性

输入值与type类型不匹配。

HTML 5新增的表单类型如email、number、url等,都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合,则typeMismatch属性将返回true,否则返回false。

复制代码
<input id="inp1" type="url" value="http://foo.com" />
<input id="inp2" type="url" value="foo" />
<input id="inp3" type="email" value="foo@foo.com" />
<input id="inp2" type="email" value="bar" />
<script type="text/javascript">
    document.getElementById('inp1').validity.typeMismatch; //false
    document.getElementById('inp2').validity.typeMismatch; //true
    document.getElementById('inp3').validity.typeMismatch; //false
    document.getElementById('inp2').validity.typeMismatch; //true
</script>
复制代码

 

3.patternMismatch属性

输入值与pattern特性的正则不匹配。

表单元素可通过pattern特性设置正则表达式的验证模式。如果输入的内容不符合验证模式的规则,则patternMismatch属性将返回true,否则返回false。

复制代码
<input id="inp1" type="text" value="1234" />
<input id="inp2" type="text" value="" pattern="[a-z]{2}"/>
<script type="text/javascript">
   document.getElementById('inp1').validity.patternMismatch;  //false
   document.getElementById('inp2').validity.patternMismatch;  //true
</script>
复制代码

 

4.tooLong属性

输入的内容超过了表单元素的maxLength 特性限定的字符长度。

表单元素可使用maxLength特性设置输入内容的最大长度。虽然在输入的时候会限制表单内容的长度,但在某种情况下,如通过程序设置,还是会超出最大长度限制。如果输入的内容超过了最大长度限制,则tooLong属性返回true,否则返回false。

复制代码
<!--tooLong: true 标识是否节点的 value 长度超过了 maxlength 属性值。所有的浏览器都会阻止用户输入超过最大长度值的内容。-->
<input id="inp1" type="text" value="A" maxlength="1" />
<input id="inp2" type="text" value="AB" maxlength="1" />
<script type="text/javascript">
    document.getElementById('inp1').validity.tooLong; //false
    document.getElementById('inp2').validity.tooLong; //true in Opera, false in 其他支持的浏览器.
</script>
复制代码

 

5.rangeUnderflow属性

输入的值小于min特性的值。

一般用于填写数值的表单元素,都可能会使用min特性设置数值范围的最小值。如果输入的数值小于最小值,则rangeUnderflow属性返回true,否则返回false。

复制代码
<input id="inp1" type="number" value="3" min="2"/>
<input id="inp2" type="number" value="1" min="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.rangeUnderflow; //false
    document.getElementById('inp2').validity.rangeUnderflow; //true
</script>
复制代码

 

6.rangeOverflow属性

输入的值大于max特性的值。

一般用于填写数值的表单元素,也可能会使用max特性设置数值范围的最大值。如果输入的数值大于最大值,则rangeOverflow属性返回true,否则返回false。

复制代码
<input id="inp1" type="number" value="1" max="2"/>
<input id="inp2" type="number" value="3" max="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.rangeOverflow; //false
    document.getElementById('inp2').validity.rangeOverflow; //true
</script>
复制代码

 

7.stepMismatch属性

输入的值不符合step特性所推算出的规则。

用于填写数值的表单元素,可能需要同时设置min、max和step特性,这就限制了输入的值必须是最小值与step特性值的倍数之和。如范围从2到6,step特性值为2,因为合法值为该范围内的偶数,其他数值均无法通过验证。如果输入值不符合要求,则stepMismatch属性返回true,否则返回false。

复制代码
<input id="inp1" type="number" value="4" min="2" max="6" step="2"/>
<input id="inp2" type="number" value="3" min="2" max="6" step="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.stepMismatch; //false
    document.getElementById('inp2').validity.stepMismatch; //true
</script>
复制代码

 

8.customError属性

使用自定义的验证错误提示信息。

有时候,不太适合使用浏览器内置的验证错误提示信息,需要自己定义。当输入值不符合语义规则时,会提示自定义的错误提示信息。

通常使用setCustomValidity()方法自定义错误提示信息:setCustomValidity(message)会把错误提示信息自定义为message,此时customError属性值为true;setCustomValidity("")会清除自定义的错误信息,此时customError属性值为false。

复制代码
<input id="inp1" type="text" />
<input id="inp2" type="text" />
<script type="text/javascript">
    document.getElementById('inp1').validity.customError; //false
    document.getElementById('inp2').setCustomValidity('Invalid');
    document.getElementById('inp2').validity.customError; //true
</script>
复制代码

 

checkValidity

返回的也是布尔值,通过验证返回真,否则返回假。

此方法作用在form表单上,验证的准确度还有待考量。

复制代码
<form id="profileform" name="profileform">
    <input type="text" id="firstname" required>
    <input type="button" id="testbutton" value="Test">
</form>
<script>
var Form = document.getElementById('profileform'),
    submitB =  document.getElementById('testbutton');
submitB.onclick=function(){
  alert(Form.checkValidity());
}</script>
复制代码

 

setCustomValidity

自定义错误提示信息。用法如上customError方法中的实例代码。

h5 为表单新增了很多类型,及属性。

根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数,这些验证表单的函数都存在了ValidityState对象中,接下来让我们一起来了解一下这些函数的用法:

 

ValidityState对象

ValidityState对象是通过validity 属性获取的,该对象有8个属性,分别针对8个方面的错误验证,属性值均为布尔值。

1.valueMissing属性

必填的表单元素的值为空。

如果表单元素设置了required特性,则为必填项。如果必填项的值为空,就无法通过表单验证,valueMissing属性会返回true,否则返回false。

复制代码
<input id="inp1" type="text" value="foo" required/>
<input id="inp2" type="text" value="" required/>
<script type="text/javascript">
    document.getElementById('inp1').validity.valueMissing; //false
    document.getElementById('inp2').validity.valueMissing; //true
</script>
复制代码

 

2.typeMismatch属性

输入值与type类型不匹配。

HTML 5新增的表单类型如email、number、url等,都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合,则typeMismatch属性将返回true,否则返回false。

复制代码
<input id="inp1" type="url" value="http://foo.com" />
<input id="inp2" type="url" value="foo" />
<input id="inp3" type="email" value="foo@foo.com" />
<input id="inp2" type="email" value="bar" />
<script type="text/javascript">
    document.getElementById('inp1').validity.typeMismatch; //false
    document.getElementById('inp2').validity.typeMismatch; //true
    document.getElementById('inp3').validity.typeMismatch; //false
    document.getElementById('inp2').validity.typeMismatch; //true
</script>
复制代码

 

3.patternMismatch属性

输入值与pattern特性的正则不匹配。

表单元素可通过pattern特性设置正则表达式的验证模式。如果输入的内容不符合验证模式的规则,则patternMismatch属性将返回true,否则返回false。

复制代码
<input id="inp1" type="text" value="1234" />
<input id="inp2" type="text" value="" pattern="[a-z]{2}"/>
<script type="text/javascript">
   document.getElementById('inp1').validity.patternMismatch;  //false
   document.getElementById('inp2').validity.patternMismatch;  //true
</script>
复制代码

 

4.tooLong属性

输入的内容超过了表单元素的maxLength 特性限定的字符长度。

表单元素可使用maxLength特性设置输入内容的最大长度。虽然在输入的时候会限制表单内容的长度,但在某种情况下,如通过程序设置,还是会超出最大长度限制。如果输入的内容超过了最大长度限制,则tooLong属性返回true,否则返回false。

复制代码
<!--tooLong: true 标识是否节点的 value 长度超过了 maxlength 属性值。所有的浏览器都会阻止用户输入超过最大长度值的内容。-->
<input id="inp1" type="text" value="A" maxlength="1" />
<input id="inp2" type="text" value="AB" maxlength="1" />
<script type="text/javascript">
    document.getElementById('inp1').validity.tooLong; //false
    document.getElementById('inp2').validity.tooLong; //true in Opera, false in 其他支持的浏览器.
</script>
复制代码

 

5.rangeUnderflow属性

输入的值小于min特性的值。

一般用于填写数值的表单元素,都可能会使用min特性设置数值范围的最小值。如果输入的数值小于最小值,则rangeUnderflow属性返回true,否则返回false。

复制代码
<input id="inp1" type="number" value="3" min="2"/>
<input id="inp2" type="number" value="1" min="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.rangeUnderflow; //false
    document.getElementById('inp2').validity.rangeUnderflow; //true
</script>
复制代码

 

6.rangeOverflow属性

输入的值大于max特性的值。

一般用于填写数值的表单元素,也可能会使用max特性设置数值范围的最大值。如果输入的数值大于最大值,则rangeOverflow属性返回true,否则返回false。

复制代码
<input id="inp1" type="number" value="1" max="2"/>
<input id="inp2" type="number" value="3" max="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.rangeOverflow; //false
    document.getElementById('inp2').validity.rangeOverflow; //true
</script>
复制代码

 

7.stepMismatch属性

输入的值不符合step特性所推算出的规则。

用于填写数值的表单元素,可能需要同时设置min、max和step特性,这就限制了输入的值必须是最小值与step特性值的倍数之和。如范围从2到6,step特性值为2,因为合法值为该范围内的偶数,其他数值均无法通过验证。如果输入值不符合要求,则stepMismatch属性返回true,否则返回false。

复制代码
<input id="inp1" type="number" value="4" min="2" max="6" step="2"/>
<input id="inp2" type="number" value="3" min="2" max="6" step="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.stepMismatch; //false
    document.getElementById('inp2').validity.stepMismatch; //true
</script>
复制代码

 

8.customError属性

使用自定义的验证错误提示信息。

有时候,不太适合使用浏览器内置的验证错误提示信息,需要自己定义。当输入值不符合语义规则时,会提示自定义的错误提示信息。

通常使用setCustomValidity()方法自定义错误提示信息:setCustomValidity(message)会把错误提示信息自定义为message,此时customError属性值为true;setCustomValidity("")会清除自定义的错误信息,此时customError属性值为false。

复制代码
<input id="inp1" type="text" />
<input id="inp2" type="text" />
<script type="text/javascript">
    document.getElementById('inp1').validity.customError; //false
    document.getElementById('inp2').setCustomValidity('Invalid');
    document.getElementById('inp2').validity.customError; //true
</script>
复制代码

 

checkValidity

返回的也是布尔值,通过验证返回真,否则返回假。

此方法作用在form表单上,验证的准确度还有待考量。

复制代码
<form id="profileform" name="profileform">
    <input type="text" id="firstname" required>
    <input type="button" id="testbutton" value="Test">
</form>
<script>
var Form = document.getElementById('profileform'),
    submitB =  document.getElementById('testbutton');
submitB.onclick=function(){
  alert(Form.checkValidity());
}</script>
复制代码

 

setCustomValidity

自定义错误提示信息。用法如上customError方法中的实例代码。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!