HTML5 - 表单客户端验证
2016-03-17 14:39
447 查看
过去对于客户端的表单验证,通常是使用JavaScript验证脚本,要么自己写,要么使用第三方库。而在HTML5中,提供了一套客户端验证方法,只需要在
1,required属性 - 表示字段不能为空
(注意:只有用户单击“提交”按钮提交表单的时候,浏览器才会执行验证。目前HTML5不支持指定验证的时间,而且验证消息的样式和内容各个浏览器不大一样,不能修改。)
2,关闭验证的两种方式
(1)在
(2)或给提交按钮添加formnovalidate属性
3,修改文本框验证样式
虽然我们无法修改验证消息的样式,但却可以根据输入字段时候需要验证,已经验证结果来改变它们的外观。
这里使用了几个新的CSS伪类:
required(必填)和optional(选填):根据字段中是否使用required属性来应用不同的样式。
valid(有效)和invalid(无效):根据控件中是否包含错误来应用不同的样式。
in-range(在范围内)和out-of-range(超出范围):根据控件的min和max属性判断输入值是否超出范围。
比如:想让必填的元素应用浅黄色背景,而必填且当前输入无效值的字段用橙色背景。
4,pattern属性 - 使用正则表达式验证
(1)不必使用^和$字符表示要匹配字段值得开头和结尾。
(2)只设置pattern的话,空值也会通过。如果不允许空,则还要加上required属性。
比如:使用正则表达式验证手机号码
5,自定义验证
对于特定字段如果正则表达式验证还无法满足需求的话,可以编写自定义的验证逻辑,并利用HTML5的验证机制。
通常使用setCustomValidity()方法提供错误消息,浏览器会将该消息当做自己的内置消息。在提交表单时,就会看到弹出的提示框中包含自定义的错误消息。
比如:验证输入内容不得少于20个字符
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_859.html
<input>字段里嵌入常用的错误检查规则即可。
1,required属性 - 表示字段不能为空
(注意:只有用户单击“提交”按钮提交表单的时候,浏览器才会执行验证。目前HTML5不支持指定验证的时间,而且验证消息的样式和内容各个浏览器不大一样,不能修改。)
<form action="#"> <input type="text" required/> <input type="submit" value="提交"> </form>
2,关闭验证的两种方式
(1)在
<form>元素中添加novalidate属性,禁用整个表单的验证功能
<form action="#" novalidate>
(2)或给提交按钮添加formnovalidate属性
<input type="submit" value="提交" formnovalidate>
3,修改文本框验证样式
虽然我们无法修改验证消息的样式,但却可以根据输入字段时候需要验证,已经验证结果来改变它们的外观。
这里使用了几个新的CSS伪类:
required(必填)和optional(选填):根据字段中是否使用required属性来应用不同的样式。
valid(有效)和invalid(无效):根据控件中是否包含错误来应用不同的样式。
in-range(在范围内)和out-of-range(超出范围):根据控件的min和max属性判断输入值是否超出范围。
比如:想让必填的元素应用浅黄色背景,而必填且当前输入无效值的字段用橙色背景。
input:required { background-color:lightyellow; } input:required:invalid { background-color:orange; }
4,pattern属性 - 使用正则表达式验证
(1)不必使用^和$字符表示要匹配字段值得开头和结尾。
(2)只设置pattern的话,空值也会通过。如果不允许空,则还要加上required属性。
比如:使用正则表达式验证手机号码
<input type="text" title="输入11位有效的手机号" pattern="1[0-9]{10}" required/>
5,自定义验证
对于特定字段如果正则表达式验证还无法满足需求的话,可以编写自定义的验证逻辑,并利用HTML5的验证机制。
通常使用setCustomValidity()方法提供错误消息,浏览器会将该消息当做自己的内置消息。在提交表单时,就会看到弹出的提示框中包含自定义的错误消息。
比如:验证输入内容不得少于20个字符
<script> function validateComments(input) { if(input.value.length < 20){ input.setCustomValidity("评论不得少于20字"); }else{ //没有错误。清除任何错误消息 input.setCustomValidity(""); } } </script> <form action="#"> <input type="text" oninput="validateComments(this)"/> <input type="submit" value="提交"> </form>
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_859.html
相关文章推荐
- HTML5 - 使用autofocus让控件自动获取焦点
- HTML5新增的元素和废除的元素
- HTML5 - 使用占位符文本placeholder添加文本框提示
- HTML5事件——contextmenu 隐藏鼠标右键菜单
- HTML5的canvas标签
- HTML5使用canvas绘制图形
- HTML5 - 使用<mark>标注高亮突显文本
- HTML5表单新增元素与属性 (续)
- HTML5表单新增元素与属性
- HTML5新增的非主体结构元素
- HTML5 - 使用<time>标注日期和时间
- HTML5 - 页面结构相关的新语义元素汇总
- HTML5 - 经典的上中下三段式布局(并使用<nav>实现侧边导航链接)
- HTML5 - 让老浏览器支持新语义元素的几种方法
- html5 图片转base64预览显示
- HTML5 - 在线检测网页在各种浏览器下的效果
- HTML5 - 使用Geolocation(地理定位)获取用户的位置
- HTML5 - 用<figure/>添加插图和图题
- HTML5新增的主体结构元素
- HTML5 - 简单的上下布局页面样例