jQuery.validate的使用
jQuery.validate是用js来编写的jquery验证框架。下面来谈下各种使用方法吧
首先需要引入jquery.js和validate.js,然后，载入validate函数，
<script src="./jquery-1.7.js" type="text/javascript"></script>
<script src="./jquery.validate.js" type="text/javascript"></script>
$(document).ready(function(){
$("#form").validate({
//写规则等内容
})
})
*validate()函数要写在body中，才能更好的实行验证功能
*错误提示的文字内容是可以修改的，除以下修改方法，还可以在源文件里修改。也可以自定义错误图示，改此代码：
<style type="text/css">
/************jQuery.Validate插件样式开始********************/
label.error
{
background: url(images/error.png) no-repeat 0px 0px;
color: Red;
padding-left: 20px;
}
input.error
{
border: dashed 1px red;
}
/************jQuery.Validate插件样式结束********************/
</style>
*内置验证规则
required:true 必输字段
remote:"check.php" 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性
number:true 必须输入合法的数字(负数，小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和#field相同
accept: "gif|png|jpg" 输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用’|’隔开
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10
某些属性值中的引号不能省略，否则出错。如accept、equalTo等
*远程验证
1， remote是远程验证：比如注册验证用户名是否已被注册，远程地址的返回值只能是true（验证成功）或false（验证失败）。例：
var Validate= function(){$("#form1").validate({
rules: {
name: {
required: true,
minlength: 2,
remote: {
url: "./check.php", //去ajax请求一个验证名字的处理
type: "post",
data: {
account: function() {return $("#name").val();} //post发送account=输入的值
}
}
}
},
check.php:
if ($this->MODEL->checkName ( $this->input->post ( 'account' ) )) { return json_encode ( '用户名已存在!' ); } else { return json_encode ( TRUE ); }
*还可以自定义验证规则
除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法 为：
jQuery.validator.addMethod("name",function,message)
其中:
1， name为验证规则的名称
2， function定义验证的规则。参数有?。返回值为?。
3， message是验证失败时的提示信息。
*可以控制表单submit提交
$(document).ready(function(){
$("#form").validate({
submitHandler:function(){ //提交时触发时，可以在里面控制不提交
alert("submitted");
//这样的情况表单是提交不了的。
如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
}
debug:true //只验证不提交
})
})
*debug只验证不提交表单
如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
如果一个页面中有多个表单都想设置成为debug，用
$.validator.setDefaults({
debug: true
})
*更改错误信息显示的位置
errorPlacement：Callback
Default: 把错误信息放在验证的元素后面
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function (error, element) { error.appendTo($("div[name='msg']"));//在name为msg的div后面显示错误信息 }
*每个字段验证通过执行函数
success：String,Callback
要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}
添加"valid" 到验证元素, 在CSS中定义的样式<style>label.valid {}</style>
例：success: "valid"
*重置表单
$(docment).ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
});
});
*部分功能实验样例
<html>
<head>
<script src="./jquery-1.7.js" type="text/javascript"></script>
<script src="./jquery.validate.js" type="text/javascript"></script>
</head>
<body>
<form action="./run.php" method="post" id="form">
名字：<input type="text" name="username" /><br />
密码：<input type="password" name="password" id="password" /><br />
确认密码：<input type="password" name="repassword" /><br />
邮箱：<input type="text" name="email" /><br />
网址：<input type="text" name="url" /><br />
日期：<input type="text" name="date" /><br />
<input type="submit" value="提交" />
</form>
<script>
$(document).ready(function(){
$("#form").validate({
rules:{ //规则
username:"required",
email:{
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
repassword: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: { //重新制定提示信息，也可以使用默认的，当然也可以直接在validate.js文件去找到并修改
firstname: "请输入姓名",
email: {
required: "请输入诛仙Email地址",
email: "请输入正确的诛仙email地址"
},
password: {
required: "请输入诛仙密码",
minlength: jQuery.format("密码不能诛仙小于{0}个字 符")
},
repassword: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致诛仙不一致"
},
},
success:function(){
//每输入合理完成后后，执行。
},
submitHandler:function(){ //提交时触发时，可以在里面控制是否提交
alert("submitted");
//form.submit(); //提交表单
},
debug:true //只验证不提交
})
})
</script>
</body>
</html>
