本文主要是介绍【纵横科技】前端 三种 表单验证 有图哦，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
源代码下载地址：http://www.zuidaima.com/share/1604388557818880.htm
（一）HTML5表单验证
1.验证是否为空，在表单控件中将required特性设置为true。
1 | <input type="text" name="myText" required> |
2.指定表单控件的type特性值(如number、email、url等)。
1 | <input type="email" name="email"> |
2 |
3 | <input type="url" name="url" > |
4 |
5 | <input type="number" name="number" > |
3.自定义匹配规则，配合title属性一起使用最好（pattern）
1 | <input type="text" name="creditcardnumber" pattern="[0-9]{5}" title="5位数字，没有空格或破折号" > |
4.限制长度（maxLength）。
1 | <input type="text" name="limitedText" maxLength="5"> |
5.限制数值型控件，最小值、最大值和步长。
1 | <input type="range" name="ageCheck" min="5" max="30" step="5"> |
6.自定义错误信息customError，调用setCustomValidity(message)后，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。
1 | <input type="text" name="customError" pattern="^\d{4}$" oninput="ce(this)" > |
01 | <script> |
02 | //customError |
03 | function ce(i){ |
04 |
05 | var v = i.validity; |
06 |
07 | if(true !== v.valueMessing){ |
08 |
09 | if(true === v.patternMismatch){ |
10 |
11 | i.setCustomValidity("请输入4位数字"); |
12 |
13 | }else{ |
14 |
15 | i.setCustomValidity(""); |
16 |
17 | } |
18 |
19 | } |
20 |
21 | } |
22 |
23 | </script> |
以上功能不需要任何引用，HTML5虽然强悍，当然也有劣势不是所有浏览器都支持HTML5，想知道你的浏览器支不支持，访问http://html5test.com/index.html 就可以看到。
（二）基于jquery的Validate表单验证插件，它所提供的验证类型有：是否为空、数字、Email地址、判断输入值是否在某一范围内等，此外你也可以自定义验证规则，它也支持在一个输入框中使用多种验证规则。验证规则的提示信息是默认设置在JS文件中的，它也提供了函数让你可以自定义提示信息。
1.默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
例子：
1 | <input type="text" name="required" class="required"> |
2.自定义规则addMethod(name,method,message)
name是添加的方法的名字；
method是一个函数,接收三个参数(value,element,param) value是元素的值,element是元素本身 param是参数；
message：是自定义的错误提示
简单弄个例子，规则名af，只能输一个字母,范围是a-f。
01 | $.validator.addMethod("af",function(value,element,params){ |
02 |
03 | if(value.length>1){ |
04 |
05 | return false; |
06 |
07 | } |
08 |
09 | if(value>=params[0] && value<=params[1]){ |
10 |
11 | return true; |
12 |
13 | }else{ |
14 |
15 | return false; |
16 |
17 | } |
18 |
19 | },"必须是一个字母,且a-f"); |
用的时候,比如有个表单字段的id="username",则在rules中写
01 | $("#form_id").validate({ |
02 |
03 | rules:{ |
04 |
05 | "af":{ |
06 |
07 | af:["a","f"] |
08 |
09 | } |
10 |
11 | } |
12 |
13 | }); |
3.引用
1 | <script src="assets/formvalidation/bassistance/js/jquery.validate.min.js"></script> |
2 |
3 | <script src="assets/formvalidation/bassistance/js/lang/jquery.validate-zh_CN.js"></script> |
初始化:
1 | <script> |
2 |
3 | $("#form_id ").validate(); |
4 |
5 | </script> |
其它的就不一一介绍啦，有兴趣的搜索jquery Validate学习一下。
（三）基于jquery的validationEngine表单验证插件，根据官网提示，该插件支持IE6-8，Chrome浏览器，火狐，Safari，Opera 10，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果(IE 9 支持圆角效果)，整体来说还是不错的。
1.默认校验规则
| 名称 | 示例 | 说明 |
|---|---|---|
| required | validate[required] | 表示必填项 |
| optional | validate[optional] | 表示可选项。若不输入，不要求必填，若有输入，则验证其是否符合要求。 |
| dateRange[name] | validate[dateRange[grp1]] | 验证日期范围 |
| dateTimeRange[name] | validate[dateTimeRange[grp1]] | 验证日期及时间范围 |
| minSize[int] | validate[minSize[6]] | 最少输入字符数 |
| maxSize[int] | validate[maxSize[20]] | 最多输入字符数 |
| groupRequired[name] | validate[groupRequired[grp2]] | 群组中至少输入一项 |
| min[int] | validate[min[1]] | 最小值（该项为数字的最小值，注意与 minSize 的区分） |
| max[int] | validate[max[9999]] | 最大值（该项为数字的最大值，注意与 maxSize 的区分） |
| past[date] | validate[past[2012/12/20]] | 日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now |
| future[date] | validate[future[now]] | 日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now |
| maxCheckbox[int] | validate[maxCheckbox[2]] | 最多选取的项目数（用于Checkbox） |
| minCheckbox | validate[minCheckbox[2]] | 最少选取的项目数（用于Checkbox） |
| equals | validate[equals[id]] | 当前控件值需与 id 这个控件的值相同 |
| phone | validate[custom[phone]] | 验证电话号码 |
| | validate[custom[email]] | 验证 Email 地址 |
| integer | validate[custom[integer]] | 验证整数 |
| number | validate[custom[number]] | 验证数字 |
| date | validate[custom[date]] | 验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D |
| dateFormat | validate[custom[dateFormat]] | 验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D |
| dateTimeFormat | validate[custom[dateTimeFormat]] | 验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM|PM |
| ipv4 | validate[custom[ipv4]] | 验证 ipv4 地址 |
| url | validate[custom[url]] | 验证 url 地址，需以 http://、https:// 或 ftp:// 开头 |
| onlyNumberSp | validate[custom[onlyNumberSp]] | 只接受填数字和空格 |
| onlyLetterSp | validate[custom[onlyLetterSp]] | 只接受填英文字母（大小写）和单引号(') |
| onlyLetterNumber | validate[custom[onlyLetterNumber]] | 只接受数字和英文字母 |
| ajax | validate[ajax[ajaxUserCallPhp]] | 在验证规则中自定义 "ajaxUserCallPhp":{ "url":"phpajax/ajaxValidateFieldUser.php", "extraData":"name=eric", "alertTextOk":"* 此帐号名称可以使用", "alertText":"* 此名称已被其他人使用", "alertTextLoad":"* 正在确认帐号名称是否有其他人使用，请稍等。" } |
| funcCall | validate[funcCall[functionName]] | 调用外部函数 |
验证规则均写在 validate[] 中，如有多条规则，用英文逗号(,) 分割，如：
1 | <input type="text" name="first_name" class="validate[required,minSize[6],custom[onlyLetterNumber]]"> |
2.引用
1 | <link rel="stylesheet" href="assets/formvalidation/validationengine/css/jquery.validationEngine.min.css"> |
2 |
3 | <script src="assets/formvalidation/validationengine/js/lang/jquery.validationEngine-zh_CN.js"></script> |
4 |
5 | <script src="assets/formvalidation/validationengine/js/jquery.validationEngine.min.js"></script> |
初始化:
1 | <script> |
2 |
3 | $("#form_validate_tooltip").validationEngine(); |
4 |
5 | </script> |
附上官网的API在附件中，里面讲的更详细，其它的就不一一介绍啦，有兴趣的看一下。
这篇关于【纵横科技】前端 三种 表单验证 有图哦的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
