【纵横科技】前端 三种 表单验证 有图哦

原文：【纵横科技】前端 三种 表单验证 有图哦

源代码下载地址：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]]	验证电话号码
email	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在附件中，里面讲的更详细，其它的就不一一介绍啦，有兴趣的看一下。