前端表单验证插件

EasyValidator实现的功能：

1.提示功能（在表单或者其他标签中加入tip="想提示的文字"）

如：

2. 普通表单验证（在表单中加入reg="正则表达式"）

如： <input name="username" reg="正则" />

<input name="name" tip="请输入你的名字哟~">

3. AJAX表单验证（在表单中加入url="验证系统地址"）

如： <input name="username" url="地址" />

4. 普通表单验证 + AJAX表单验证 （普通验证通过以后，再进行AJAX验证）

如： <input name="username" reg="正则" url="地址" />

5. 扩展函数表单验证

比如自定义验证规则:

<input name="u" type="password" id="pwd2" reg="^\w{6,20}$" tip="6-20个字符，请确认两次密码输入相同"/> </td>

var isExtendsValidate = true; //如果要试用扩展表单验证的话，该属性一定要申明

function extendsValidate(){ //函数名称，固定写法

//密码匹配验证

if( $('#pwd1').val() == $('#pwd2').val() ){
//匹配成功

$('#pwd2').validate_callback(null,"sucess");
//此次是官方提供的，用来消除以前错误的提示

}else{//匹配失败

$('#pwd2').validate_callback("密码不匹配","failed");
//此处是官方提供的API，效果则是当匹配不成功，pwd2表单 显示红色标注，并且TIP显示为“密码不匹配”

return false;

}

//如果觉得官方提供的错误提示UI API 过于复杂，完全可以选择自定义，可以试试下面注释掉的代码

//if( $('#pwd1').val() != $('#pwd2').val() ){
//匹配不成功

//alert("密码不匹配");

//return false;

//}

//checkbox 验证，必须选择一个checkbox

if($("[name='lover']:checked").length < 1){

alert("必须得有一个lover!");

return false;

}

}

validate

一. jquery.validate.js是jquery下的一个验证插件，功能比较强大

Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:

内置的验证规则，如：必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则

可以自定义验证规则：可以很方便地自定义验证规则

简单而且强大的验证信息提示：没人了验证信息提示，并提供自定义覆盖默认提示信息功能

实时进行验证的功能.：通过blur和keyup时间来触发验证规则

二、默认校验规则

(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.加载文件

<script type="text/javascript" src="jquery1.10.2.js"></script>

<script type="text/javascript" src="jquery.validate.min.js"></script>

<script type="text/javascript" src="messages_zh.js"></script>

2.构建表单

<form id="myform" >

<input id="cusername" name="username" size="25" class="required" minlength="2" />

<input id="cemail" name="email" size="25" class="required email" />

<input id="pwd" name="email" size="25" class="required" rangelength='5,10' />

注意: 多个参数之间使用空格分隔。

如果验证规则有参数:

</form>

3.调用:

<script type="text/javascript">

$(document).ready(function() {

$("你的form表单id").validate();

});

</script>

4.改变错误提示的样式:

在css里面

label.error{

margin-left: 10px;

color: red;

}

5. 指定错误显示容器:

在validate()里面添加属性

$("你的form表单id").validate({

errorElement : "span" //用来创建错误提示信息标签(可自定义)

});

注意: 如果有其他属性也可以添加到{} 里面，多个属性之间使用 , 分隔，最后一个不打 ，

6.验证的另外一种方式： 实现html 与验证规则分离

$("#signupForm").validate({

rules:{

在rules里面写验证规则，多个验证规则之间使用,分隔,最后一个规则不打,

inputName: { 规则1,规则2 },

inputName: { 规则1,规则2 }

} ,

messages: {

你的提示信息

inputName: { 规则名 : "提示信息" ,规则名 : "提示信息" }

}

})

7.其他常用属性

Success : function(label){ //验证成功后执行的回调函数，label指向上面那个错误提 示信息标签em

label.text( ' ' ) //清空错误提示消息

. addClass("success") //添加上自定义的success类

}

再在css中给em.error 和 em.success设置样式（如背景分别为错号和对号等）

自定义验证规则

$.validator . addMethod(

"你自己的方法名", //自定义规则方法名

function(value , element , param){ /自定义规则体

return value == eval_r(param);

},

'请输入正确的数学公式计算后的结果' //提示信息

)

调用自定义的验证规则

在 rules中加入valcode :( 自定义规则方法名 : "参数")

比如:

$("#formId").validate({

rules : { //增加rules属性

username: { required : true , minlength : 2} ,

email : { required : true , email : true} ,

url : "url" ,

comment : "required" ,

valcode : (formula : "7+9") //valcode为name的值

}

})