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方法中的实例代码。

html5 自定义验证信息的更多相关文章

  1. 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容

    在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...

  2. 对HTML5校验 自定义验证信息

    在HTML5中,表单可以定义一个属性required来触发默认的校验机制,比如: <input type="text" required /> 弹出的错误提示默认为英文 ...

  3. MVVM架构~knockoutjs系列之验证信息自定义输出~续

    返回目录 上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题 ...

  4. .NET 实现自定义ContextUser的Identity和Principal实现自定义用户信息,权限验证。

    备用收藏,http://blog.csdn.net/msdnxgh/article/details/6894885 .NET 实现自定义ContextUser的Identity和Principal 在 ...

  5. 微信小程序 - 表单验证插件WxValidate(自定义警告信息形式)

    弹出的形式对于用户来说,总是不太友好的 可能会出现层级问题(只需要设置一下提示的层级即可) WxValidate内置规则 以下代码拷贝即可使用~ wxml <form bindsubmit='s ...

  6. MVVM架构~knockoutjs系列之验证信息自定义输出

    返回目录 这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我 ...

  7. 教程:让你的表单升级到CSS3和HTML5客户端验证

    今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证. 查看预览下载附件 第一步:策划表单功能 首先,我们得为 ...

  8. angularJS中的表单验证(包括自定义验证)

    表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏.Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用 ...

  9. 9、 Struts2验证(声明式验证、自定义验证器)

    1. 什么是Struts2 验证器 一个健壮的 web 应用程序必须确保用户输入是合法.有效的. Struts2 的输入验证 基于 XWork Validation Framework 的声明式验证: ...

随机推荐

  1. 三种Singleton的实现方式

    来源:http://melin.iteye.com/blog/838258 三种Singleton的实现方式,一种是用大家熟悉的DCL,另外两种使用cas特性来实现. public class Laz ...

  2. shell条件判断中-a至-z的含义

    [ -a file ] ------- 如果file存在,返回值为真. [ -b file ] ------- 如果file存在且为块特殊文件,返回值为真. [ -c file ] ------- 如 ...

  3. 基于WebDriver&TestNG 实现自己的Annotation @TakeScreenshotOnFailure

    相信用过Selenium WebDriver 的朋友都应该知道如何使用WebDriver API实现Take Screenshot的功能. 在这篇文章里,我主要来介绍对failed tests实现 t ...

  4. Burp SuiteBurp Suite使用详解

    http://www.2cto.com/Article/201209/153312.html Burp Suite是Web应用程序测试的最佳工具之一,其多种功能可以帮我们执行各种任务.请求的拦截和修改 ...

  5. android studio 生成aar包并在其他工程引用 (导入)aar包

    1.aar包是Android studio下打包android工程中src.res.lib后生成的aar文件,aar包导入其他android studio 工程后,其他工程可以方便引用源码和资源文件 ...

  6. 转:Java.file

    类 java.io.File 的使用 使用 File 的软件包 java.awt 包含用于创建用户界面和绘制图形图像的所有类. java.io 通过数据流.序列化和文件系统提供系统输入和输出. jav ...

  7. 如何创建vss2005的数据库

    配置如下 VSS手工创建数据库的步骤(设数据库根目录为D:\VSS): 1.在根目录中创建名为srcsafe.ini(全局配置文件)的文件,文件内容如下: Data_Path = data Temp_ ...

  8. Java反射机制DOME

    Java反射机制 public class TestHibernate { @Test public void TestHb(){ try { Class cs = Class.forName(&qu ...

  9. Access denied for user 'root'@'localhost' (using password:YES)

    版权所有,未经博主允许不得转载. 今天发现服务器mysql连接不上,报 can't connect to mysql server on 'root'@'ip' (61) 照例ssh到服务器,发现my ...

  10. Python 练习

    1.有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k1': ...