jQuery.validation.js实现前台表单验证

1.首先，下载jQuery.validation.js，及jQuery.js

2.jsp页面导入

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

3.使用方式：

 $().ready(function() {
		//获取指定的form表单执行validate()方法
		$("#employee").validate({
                          //debug:true	//调试专用，加上此句，表单不会真正提交，但校验依然有效		
                         //rules是验证规则
			rules : {
				"employee.name" : "required",
				"employee.marking": "required",
				"employee.hometown": "required",
				"employee.nation":"required",
				"employee.address":"required",
				"employee.birthday":"required",
				"employee.entryDate":"required",
				"employee.pay":{
					required:true,
					salary:true,	
				},
				"employee.phone":{
					required:true,
					phone:true,
					
				},
				"employee.telephone":{
					required:true,
					mobile:true,
					
				},
				"employee.email":{
					required:true,
					email:true,
					
				},
				"employee.education":{
					required:true,
					selectNone:true,
					
				},
				"employee.state":{
					required:true,
					selectNone:true,
					
				},
				"employee.idNo":{
					required:true,
					personCard:true,
					
				},
			},
			//自定义错误提示信息，可不写，有默认值
			messages : {
			},
			//验证通过后的回调函数（信息）
			success : function(label) {
				label.addClass("checked");
			}
		});
	});

4.校验规则

默认校验规则
(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

---------------------------------------------------------------------------------------------

也可自定义规则，如下：

5.注：

 此种校验模式，只有点击提交后才能校验。

 空白表单直接点击提交，貌似不触发校验，（忘了怎么解决的，后期补充）

6.默认规则不合适，可自定义规则

validate中自带的验证方法足以满足一般的要求，对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则

此类自定义验证规则可以另写一个js文件，统一管理如：addtional-method.js

       $.validator.addMethod("phoneNo",function (value, element) {

            varlength = value.length;

            varregex = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;

           return this.optional(element) || (length == 11 &&regex.test(value));

        },"手机号码格式错误"); 

 

        $(function () {

            $("#register").validate({

                rules: {

                    username: {

                        required: true,

                        rangelength: [3, 8]

                    },

                    password: {

                        required: true,

                        minlength: 5

                    },

                    repassword: {

                        required: true,

                        minlength: 5,

                        equalTo:"#password"

                    },

                    email: {

                        required: true,

                        remote: {

                            url:"/remote.ashx",

                            type:"post",

                            dataType:"html",

                            cache: false,

                            data: {

                                email: function() {

                                    return$("#email").val();

                                }

                            },

                            dataFilter: function(data) {

                                returndata.toLowerCase() === "true";

                            }

                        }

                    },

                    phone: {

                       required: true,

                       phoneNo: true

                    }

                },