jQuery的validate插件,在jQuery验证时使用非常方便。
具体使用步骤:
1.引入文件
<script src="/js/class/jquery-1.3.2.min.js" type="text/javascript" ></script>
<script src="/js/class/jquery.validate.js" type="text/javascript" ></script>
<script src="/js/class/jquery.metadata.js" type="text/javascript" ></script>
<script src="/js/class/jquery.validate.messages_cn.js" type="text/javascript" ></script>
既然是jQuery插件,必须要有jQuery作为支持jquery-1.3.2.min.js
然后是验证的核心文件jquery.validate.js
然后是快捷使用文件,使得可以直接在表单中写验证条件jquery.metadata.js
然后是中文提示支持其中的内容很简单
/*
* Translated default messages for the jQuery validation plugin.
* Language: CN
* Author: Fayland Lam <fayland at gmail dot com>
*/
jQuery.extend(jQuery.validator.messages, {
required: "<font color='#E15B50'>必选字段</font>",
remote: "<font color='#E15B50'>请修正该字段</font>",
email: "<font color='#E15B50'>请输入正确格式的电子邮件</font>",
url: "<font color='#E15B50'>请输入合法的网址</font>",
date: "<font color='#E15B50'>请输入合法的日期</font>",
dateISO: "<font color='#E15B50'>请输入合法的日期 (ISO).</font>",
number: "<font color='#E15B50'>请输入合法的数字</font>",
digits: "<font color='#E15B50'>只能输入整数</font>",
creditcard: "<font color='#E15B50'>请输入合法的信用卡号</font>",
equalTo: "<font color='#E15B50'>请再次输入相同的值</font>",
accept: "<font color='#E15B50'>请输入拥有合法后缀名的字符串</font>",
maxlength: jQuery.format("<font color='#E15B50'>请输入一个长度最多是 {0} 的字符串</font>"),
minlength: jQuery.format("<font color='#E15B50'>请输入一个长度最少是 {0} 的字符串</font>"),
rangelength: jQuery.format("<font color='#E15B50'>请输入一个长度介于 {0} 和 {1} 之间的字符串</font>"),
range: jQuery.format("<font color='#E15B50'>请输入一个介于 {0} 和 {1} 之间的值</font>"),
max: jQuery.format("<font color='#E15B50'>请输入一个最大为 {0} 的值</font>"),
min: jQuery.format("<font color='#E15B50'>请输入一个最小为 {0} 的值</font>")
});
就这么些语句,可以根据自己的需要进行修改。
2.设置作用对象
$("#form1").validate({
submitHandler:function(form){
form.submit();
}
});
上面的代码告诉插件要对id为form1的表单进行验证
其中
submitHandler:function(form){
form.submit();
}
是表示人为的设置提交表单。当验证成功的时候会提交表单。
如果没有这段代码,其实也一样,验证成功后会提交表单。
而验证什么时候被激活呢?就是#form1表单有提交动作的时候被激活。
所以下面的代码也很有必要:
//提交
$(".make_sure").click(function(){
$("#form1").submit();
});
当点击按钮时,执行提交动作!由于有验证插件的存在,所以提交必须要走一下验证的流程,只有通过了验证,才能真正的提交表单。
3.设置验证规则
由于有了jquery.metadata.js的帮助,验证规则设置变得非常的便捷。
在相应的表单元素中设置class属性即可。
class="required number"
等等。
具体的验证规则有很多,如下:
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错,慎用
(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
设置好验证规则之后,插件就会帮助你进行相应的验证了。
截图如下:
如果通过验证,就会跳转到后台!完成表单提交动作!