Jquery Validation框架

1. 作用

jquery.validatejquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。

2. HelloWorld

说明:需要JQuery版本:1.2.6+

步骤:

1, 要导入相应的jQuery.jsjquery.validate.js文件
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.validate.js” type=”text/javascript”>

2, 在相应的字段上指定验证规则
名称 *<input type=”text” name=”loginName” class=”required”>
其中class=”required”代表本字段必须要输入数据

3, 指定要对表单进行验证
<script type=”text/javascript”>

$(function(){

$(“#testForm”).validate();

});

</script>

效果如下图:

 

 

 

 

3. 基础知识

3.1. 指定验证规则的方式

3.1.1. 把验证规则写到字段元素的class属性中

例:

名称 * <input type=”text” name=”loginName” class=”required”><br>

密  * <input type=”password” name=”password” class=”required”><br>

再次输入 <input type=”password” name=”password2″

class=”{equalTo: ‘[name=password]’} required”><br>

生日    <input type=”text” name=”birthday” class=”dateISO”><br>

E-mail *<input type=”text” name=”email” class=”email”><br>

PAR(zip)<input type=”file” name=”resource” class=”{accept: ‘zip’}”>

 

说明:

1, 如果使用class=”{key:value,…}”的方式,必须引入:jquery.metadata.js

2, 表单字段的name不能重复,否则所配置的验证不起作用。

3.1.2. 调用validate()方法时传递字段的验证规则

$(function() {

$(“#testForm”).validate({

rules: {

loginName:{

required: true,

min: 2

}   ,

password: {

required: true

},

password2: {

equalTo: “input[name=password]”

}

}

});

});

3.2. 内置的验证规则

required:true 必填字段
remote:”check.php” 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO),例如:2010-01-012010/01/01 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:”#field” 输入值必须和$(“#field”)相同
accept: “gif|png|jpg” 输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:3 输入长度最小是3的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 10 之间的字符串“)(汉字算一个字符)
range:[5,10] 输入值必须介于 5 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10

说明:

1, remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。在访问指定的url时,会自动把当前字段的值做为参数(以字段namekey)传递过去。

2, 某些属性值中的引号不能省略,否则出错。如acceptequalTo等。

 

remote使用时遇到的问题:添加用户时需要验证用户名是否存在,当添加上一个用户后,在不离开该页面的情况下,再次添加该用户名的用户,validate不能提示该用户已存在,因为缓存的原因,jquery仍认为该用户名可用。解决方法是在页面中添加:$().ready(function(){

$.ajaxSetup ({

cache: false //关闭AJAX相应的缓存

}); // 关闭缓存功能

});

添加

 

修改错误信息提示位置:

修改Jquery validate 的错误提示位置,把错误提示在input内,当获得鼠标焦点的时候清楚提示信息。
具体使用方法:
var validator = $(“#myContainerForm”).validate({
focusCleanup:true,//clear the error message when the error element get focus again.
onkeyup:false,
errorPlacement: function(error, element) {
showErrorMesssgeDiv(error,element);
},
rules:{
name:{
required: true
}
},
messages: {
name:{
required:populateErrorMessage($(“#errorRequiredMessage”).val(), $(“#containerNameTitle”).val())
}
}
});

3.3. 自定义验证规则

除了内置的验证规则,validation还允许自定义验证规则。这是通过validationaddMethod()方法实现的,语法 为:

jQuery.validator.addMethod(“name”,function,message)

其中:

1, name为验证规则的名称

2, function定义验证的规则。参数有?。返回值为?

3, message是验证失败时的提示信息。

3.4. 指定错误提示内容

3.4.1. 更改默认的提示内容

jQuery.extend(jQuery.validator.messages, {

required: “必填字段“,

remote: “请指定一个不重复的值“,

email: “请输入正确格式的电子邮件“,

url: “请输入合法的网址“,

date: “请输入合法的日期“,

dateISO: “请输入合法的日期 (ISO).”,

number: “请输入合法的数字“,

digits: “只能输入整数“,

creditcard: “请输入合法的信用卡号“,

equalTo: “请再次输入相同的值“,

accept: “请输入拥有合法后缀名的字符串“,

maxlength: jQuery.validator.format(“允许的最大长度为 {0} 个字符“),

minlength: jQuery.validator.format(“允许的最小长度为 {0} 个字符“),

rangelength: jQuery.validator.format(“允许的长度为{0}{1}之间“),

range: jQuery.validator.format(“请输入介于 {0} {1} 之间的值“),

max: jQuery.validator.format(“请输入一个最大为 {0} 的值“),

min: jQuery.validator.format(“请输入一个最小为 {0} 的值“)

});

3.4.2. 个别表单改变提示内容(只对当前表单有效)

方法一:

<input type=”file” name=”parResource”

class=”{required: true, accept: ‘zip’, messages: {required: ‘请选择文件‘, accept:’请选择正确的文件‘}}”>

 

方法二:

$(function() {

$(“#testForm”).validate({

messages:{

loginName: {

required: “必选字段2″

},

email: {

required: ‘必选字段22′,

email: “请输入正确格式的电子邮件2″

}

}

});

});

3.5. 改变错误消息显示样式

指定label.error的样式就可以了,如下:

<style type=”text/css”>

label.error{

margin-left: 10px;

color: red;

}

</style>

 

说明:label.errorclasserrorlabel元素,如:<label for=”resource” class=”error”>

4. 扩展使用

怎么让错误提示信息显示到指定的位置

5. 附录

 

1.http://wenku.baidu.com/view/b47bdd0cf12d2af90242e68d.html?from=related&hasrec=1

2.系列文章 http://my.oschina.net/duanlijun/blog/9950

3. 官网:http://docs.jquery.com/Plugins/Validation#A_multipart_.22buy.26sell_a_house.22_form

 

Tagged as: