jquery.validate 学习笔记（验证form表单工具）

在网上找了一些资料，很多对表单验证的工具需要指明表单的控件的name 或者 id，就需要自己写JS代码来指明哪些控件需要添加校验，如果页面很多，自己JS的工作量还是比较大的，还不如自己写代码去校验，因此我选择了jquery.validate.js这个工具，它只需要在控件中添加对应的属性就可以了，不需要再写JS代码去指明哪些控件需要校验表单内容。

 

修改默认提示信息的方法

/* 默认提示信息
var messages = {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
}
*/

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} 的值")
	});

 

自己写的demo,仅仅是在控件端添加属性验证表单内容

	必须填写：

	

	

	
	minlength="2"  maxlength="5" 必须填写，最小长度是2，最大长度是5:(汉字算一个字符)

	

	

	
	rangelength="5,10"   输入的内容长度必须在5-10之间：(汉字算一个字符)

	

	

	
	min="11" max="22"  必须填写，数字最小值为11，最大值为22：

	

	

	
	range="11,22" 必须填写，数字最小值为11，最大值为22：

	

	

	
	equalTo="#mypassword" 两个密码一致校验：

	mypassword:

	repassword:

	

	
	number="true" 必须输入合法的数字：必须输入合法的数字(负数，小数) 

	

	

	
	digits="true" 必须输入整数：

	

	

	
	email="true" EMAIL：

	

	

	
	url="true"   URL：（要有http(s)://www）

	

	

	
	date="true"   DATE日期：(2003/9/9),值校验格式，不会校验里面的数据，因此详细内容还是要自己校验

	

	

	
	dateISO="true"  dateISO日期：值校验格式，不会校验里面的数据，因此详细内容还是要自己校验

	

	

	
	对上传文件格式进行校验：(这个问题还等待解决)

	

	

	

	
	备注：表单的id 和 name必须唯一，否则无法正确校验。
		
	
	

 

 上面的例子的确能够快速的校验表单，但是提示信息不够精细，不能够准确的提示用户，因此还有如下方法

 

    
    
        
        
        
        
    
    
    
        

        
        

            

                

                    字段校验、日历控件完整示例
                
                

                    

                        

                            
                                Username
                            
                        
                        

                            
                        
                        
                        

                        
                    
                    

                        

                            
                                Password
                            
                        
                        

                            
                        
                        

                        
                    
                    

                        

                            
                                Confirm password
                            
                        
                        

                            
                        
                        

                        
                    
                    

                        

                            
                                sex
                            
                        
                        

                                男
                               女 
                        
                        

                        
                    
                    

                        

                            
                                Email
                            
                        
                        

                            
                        
                        

                        
                    
                    

                        

                            
                                Upload
                            
                        
                        

                            
                        
                        

                        
                    
                    

                        

                            
                                language
                            
                        
                        

                            
                            汉语
                            
                            英语
                            
                            日语
                            
                            德语
                        
                        

                        
                    
                    

                        

                            
                                book
                            
                        
                        

                            
                                
                                    英语书
                                
                                
                                    汉语书
                                
                                
                                    日语书
                                
                                
                                    德语书
                                
                            
                        
                        

                        
                    
                    

                        

                            
                                同意该协议
                            
                        
                        

                            
                        
                        

                        
                    
                    

                        

                            
                        
                    
                
            
        
    

 

备注：

1、rules对象里面的key是表单的“name”和“id”,这里我们要求name与id对应起来。

2、message与rules对应起来，都是对应表单的名称

3、rules中的required表示是验证内容不能为空，message中的required表示给出内容为空的提示

• jquery-validation-1.11.1.rar (568.5 KB)
• 下载次数: 2