第六天我为集成平台狂（四）-步履轻盈的JQuery(二)

最新推荐文章于 2024-10-02 05:39:15 发布

醉捞明月

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量1.1k

点赞数

文章标签： javascript jquery 架构研发 ide

本文链接：https://blog.csdn.net/zwszws/article/details/20748211

版权

3月6日，小雨，温度有点低，“乍暖还寒时候，最难将息”。研究了集成平台的验证方法，似乎用的jquery.validate，从平台生成的JS文件夹里，发现了jquery.validate.js文件，肯定了俺的判断。有必要挖一挖jquery.validate.js的使用方法，极具实用性。

1、牛刀小试

第一步，官方网站下载jquery.validate.js：http://bassistance.de/jquery-plugins/jquery-plugin-validation/。导入jquery.validate库，放在jquery-1.8.3.js的后面，注意顺序不要颠倒：

第二步，编写测试表单validateTest.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/myValidate1.js"></script>
</head>

<body>
	<form id="testForm" name="form1" method="get" action="">
		<p> 用户名：
			<input type="text" name="loginName"   class="required">
		<p>电子邮件：
			<input type="text" name="eMail" class="required email">
		<p>手机：
			<input type="text" name="cellPhone" class="required mobile">
		<p> 密码：
			<input type="password" name="password" id="password"
			   class="required">
		<p>密码验证：
			<input type="password" name="password2" class="required">
		<p>
			<input class="submit" type="submit" name="button" id="button" value="提交" />
		</p>
	</form>
</body>
</html>

第三步，添加脚本myValidate1.js来进行验证

$(document).ready(function(e) {
    $("#testForm").validate({
       	
	})
});

运行测试表单validateTest.html，不填任何内容，点击确定按钮，结果如图：

很神奇的情况出现了，我们没有写任何信息提示，但是，提示如愿而至，太爽了。但是，高兴的太早，提示信息是洋文。为什么会出现这种状况？

分析一下代码，在validateTest.html中，class属性表示验证规则，其中required表示必填的，number表示必须是数字，email表示必须是电子邮件格式，如果写成required email表示这个字段必须填写同时必须是email格式；那么required number mobile，就是满足必填-数字-mobile格式这三个校验条件。

由于验证规则写到字段元素的class属性中，所以myValidate1.js中的内容只有一句 $("#testForm").validate()，即可完成最简单的字段验证。

那么，善于刨根问底的你也许好奇提示消息的出处？别急，打开jQuery.Validate源代码（1.11.1版），在281行，会发现这些提示消息的定义方式。当然jQuery.Validate还提供许多验证方法，如电子邮件，网址，日期，范围，最大值，最小值，整数，值比较等多种验证方式，在993行可以找到。源代码如下：

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).",
		number: "Please enter a valid number.",
		digits: "Please enter only digits.",
		creditcard: "Please enter a valid credit card number.",
		equalTo: "Please enter the same value again.",
		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}.")
	},

methods: {

		// http://docs.jquery.com/Plugins/Validation/Methods/required
		required: function( value, element, param ) {
			// check if dependency is met
			if ( !this.depend(param, element) ) {
				return "dependency-mismatch";
			}
			if ( element.nodeName.toLowerCase() === "select" ) {
				// could be an array for select-multiple or a string, both are fine this way
				var val = $(element).val();
				return val && val.length > 0;
			}
			if ( this.checkable(element) ) {
				return this.getLength(value, element) > 0;
			}
			return $.trim(value).length > 0;
		},

		// http://docs.jquery.com/Plugins/Validation/Methods/email
		email: function( value, element ) {
			// contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
			return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
		},
...

2、刨丁解牛

如果把想把消息改成中文的方式，可以直接把英文提示改成中文，这样太过生猛，破坏力太强。通常是写一个扩展文件，下节介绍。

本节想自己写一个中文提示，再加一些限制条件，如长度、范围等。

修改脚本myValidate1.js如下：

function lang(key) {   
         mylang = {   
              'ls_input_name': '请输入您的用户名', 
			  'ls_input_name_length': '用户名的长度为{0}位',     
              'ls_input_email': '请输入您的邮箱地址',   
			  'ls_input_valid_email': '请输入正确邮箱地址',
			  'ls_input_cellphone':'请输入您的手机号',
			  'ls_input_valid_number':'请输入有效数字',
			  'ls_input_valid_cellphone':'请输入正确手机号码',
              'ls_login_password': '请输入您的登录密码',   
              'ls_password_length': '密码长度为{0}-{1}位之间',   
              'ls_input_captcha': '请输入验证码',   
              'ls_equal_captcha': '请输入和密码相同的内容',   
              };        
        return mylang[key];   
     }   

$(function(){
     $("#testForm").validate({
        rules: {
            loginName: { required: true, minlength: 2},
            password: { required: true , rangelength: [6, 12] },
            password2: { required: true , equalTo: "#password" }			
        },
		messages:{
			loginName:
			{
				required: lang('ls_input_name'),
                minlength: lang('ls_input_name_length')
			},
			eMail:
			{
			    required: lang('ls_input_email'),
				email: lang('ls_input_valid_email') 
			},
			cellPhone:
			{
			    required: lang('ls_input_cellphone'),
				number: lang('ls_input_valid_number'), 
				mobile: lang('ls_input_valid_cellphone') 
			},
			password:
			{
			    required: lang('ls_login_password'),
				rangelength: lang('ls_password_length')
			},
			
			password2:
			{
			    required: lang('ls_input_captcha'),
				equalTo: lang('ls_equal_captcha')
			}
			
		}
    });
});

重新运行测试表单validateTest.html，不填任何内容，点击确定按钮，结果如图：

中文提示终于出现了，别得意，还有多种验证方式呐

可叹，JQuery的精巧与迅捷，直指人心，痛快淋漓，让人折服。

3、游刃有余

jquery.validate.js 提供了基础的电子邮件、URL、日期等验证，但是在实际开发中可能会有新的验证规则，这个需要我们自己定义一个，如上例中的mobile，就没有定义验证规则。故需要额外添加自定义校验 jquery.validate.extends.js。放在jquery.validate.js的后面，注意顺序不要颠倒：

jquery.validate.extends.js代码如下：

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} 的值") 
});
   
    // 手机号码验证
	jQuery.validator.addMethod("mobile", function(value, element) {
		var length = value.length;
		//长度为11，以13，15，18开头的
		return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
	}, "手机号码格式不对");

自定义验证方法（addMethod：name, method, message）就写了一个手机号码验证，如需新的验证方法，可自己添加。

修改脚本myValidate1.js 如下：

$(function(){
     $("#testForm").validate({
        rules: {
            loginName: { required: true, minlength: 2},
            password: { required: true , rangelength: [6, 12] },
            password2: { required: true , equalTo: "#password" }			
        }
		});
	});

重新运行测试表单validateTest.html，填写测试内容，点击确定按钮，结果如图：

其实，校验规则既可以写到html的控件中，也可以写在js代码中，写在js中较整洁些。

http://www.douban.com/note/375865795/
http://www.douban.com/note/375865885/
http://www.douban.com/note/375865924/
http://www.douban.com/note/375865978/
http://www.douban.com/note/375866028/
http://www.douban.com/note/375866077/
http://www.douban.com/note/375866137/
http://www.douban.com/note/375866213/
http://www.douban.com/note/375866432/
http://www.douban.com/note/375866455/
http://www.douban.com/note/375866508/
http://www.douban.com/note/375866540/
http://www.douban.com/note/375866593/
http://www.douban.com/note/375866651/
http://www.douban.com/note/375866689/

http://www.douban.com/note/375868477/
http://www.douban.com/note/375868509/
http://www.douban.com/note/375868552/
http://www.douban.com/note/375868617/
http://www.douban.com/note/375868689/
http://www.douban.com/note/375868724/
http://www.douban.com/note/375868756/
http://www.douban.com/note/375868794/

http://www.douban.com/note/375850124/
http://www.douban.com/note/375850200/
http://www.douban.com/note/375850296/
http://www.douban.com/note/375850595/
http://www.douban.com/note/375850655/
http://www.douban.com/note/375851221/
http://www.douban.com/note/375851367/
http://www.douban.com/note/375851381/
http://www.douban.com/note/375851603/
http://www.douban.com/note/375851661/
http://www.douban.com/note/375851787/
http://www.douban.com/note/375851830/
http://www.douban.com/note/375851877/
http://www.douban.com/note/375851995/
http://www.douban.com/note/375852068/
http://www.douban.com/note/375852120/

http://www.douban.com/note/375850023/
http://www.douban.com/note/375850063/
http://www.douban.com/note/375850097/
http://www.douban.com/note/375850189/
http://www.douban.com/note/375850281/
http://www.douban.com/note/375850349/
http://www.douban.com/note/375850379/
http://www.douban.com/note/375850427/
http://www.douban.com/note/375850706/
http://www.douban.com/note/375850911/
http://www.douban.com/note/375850998/
http://www.douban.com/note/375851051/
http://www.douban.com/note/375851082/
http://www.douban.com/note/375851170/
http://www.douban.com/note/375851214/
http://www.douban.com/note/375851333/
http://www.douban.com/note/375851655/
http://www.douban.com/note/375851756/
http://www.douban.com/note/375851828/
http://www.douban.com/note/375851867/
http://www.douban.com/note/375851922/
http://www.douban.com/note/375851971/
http://www.douban.com/note/375852050/
http://www.douban.com/note/375852231/

http://www.douban.com/note/375853427/
http://www.douban.com/note/375853492/
http://www.douban.com/note/375853612/
http://www.douban.com/note/375853664/
http://www.douban.com/note/375853732/
http://www.douban.com/note/375853787/
http://www.douban.com/note/375853823/
http://www.douban.com/note/375853871/
http://www.douban.com/note/375854261/
http://www.douban.com/note/375854365/
http://www.douban.com/note/375854434/
http://www.douban.com/note/375854531/
http://www.douban.com/note/375854885/
http://www.douban.com/note/375854988/
http://www.douban.com/note/375855020/
http://www.douban.com/note/375855312/
http://www.douban.com/note/375855417/
http://www.douban.com/note/375855512/
http://www.douban.com/note/375855541/
http://www.douban.com/note/375855611/
http://www.douban.com/note/375855747/

http://www.douban.com/note/375853319/
http://www.douban.com/note/375853348/
http://www.douban.com/note/375853375/
http://www.douban.com/note/375853446/
http://www.douban.com/note/375853538/
http://www.douban.com/note/375853575/
http://www.douban.com/note/375853628/
http://www.douban.com/note/375853724/
http://www.douban.com/note/375853835/
http://www.douban.com/note/375853880/
http://www.douban.com/note/375853930/
http://www.douban.com/note/375854013/
http://www.douban.com/note/375854084/
http://www.douban.com/note/375854106/
http://www.douban.com/note/375854128/
http://www.douban.com/note/375854195/
http://www.douban.com/note/375854458/
http://www.douban.com/note/375854525/
http://www.douban.com/note/375854585/
http://www.douban.com/note/375854670/
http://www.douban.com/note/375854777/
http://www.douban.com/note/375854818/
http://www.douban.com/note/375854873/
http://www.douban.com/note/375854925/
http://www.douban.com/note/375855117/
http://www.douban.com/note/375855173/
http://www.douban.com/note/375855269/
http://www.douban.com/note/375855360/
http://www.douban.com/note/375855449/
http://www.douban.com/note/375855525/
http://www.douban.com/note/375855565/
http://www.douban.com/note/375855650/
http://www.douban.com/note/375855959/
http://www.douban.com/note/375855983/
http://www.douban.com/note/375856017/
http://www.douban.com/note/375856045/
http://www.douban.com/note/375856059/
http://www.douban.com/note/375856107/
http://www.douban.com/note/375856188/

http://www.douban.com/note/375857349/
http://www.douban.com/note/375857403/
http://www.douban.com/note/375857487/
http://www.douban.com/note/375857550/
http://www.douban.com/note/375857616/
http://www.douban.com/note/375857655/
http://www.douban.com/note/375857695/
http://www.douban.com/note/375857763/
http://www.douban.com/note/375857881/
http://www.douban.com/note/375857906/
http://www.douban.com/note/375857942/
http://www.douban.com/note/375857981/
http://www.douban.com/note/375858015/
http://www.douban.com/note/375858070/
http://www.douban.com/note/375858139/
http://www.douban.com/note/375858187/
http://www.douban.com/note/375858381/
http://www.douban.com/note/375858457/
http://www.douban.com/note/375858500/
http://www.douban.com/note/375858567/
http://www.douban.com/note/375858596/
http://www.douban.com/note/375858626/
http://www.douban.com/note/375858662/
http://www.douban.com/note/375858715/
http://www.douban.com/note/375858905/
http://www.douban.com/note/375858957/
http://www.douban.com/note/375859068/
http://www.douban.com/note/375859113/
http://www.douban.com/note/375859136/
http://www.douban.com/note/375859193/
http://www.douban.com/note/375859269/
http://www.douban.com/note/375859299/
http://www.douban.com/note/375859478/
http://www.douban.com/note/375859543/
http://www.douban.com/note/375859611/
http://www.douban.com/note/375859643/
http://www.douban.com/note/375859701/
http://www.douban.com/note/375859738/
http://www.douban.com/note/375859756/
http://www.douban.com/note/375859794/

http://www.douban.com/note/375860041/
http://www.douban.com/note/375860750/
http://www.douban.com/note/375860823/
http://www.douban.com/note/375860861/
http://www.douban.com/note/375860905/
http://www.douban.com/note/375860956/
http://www.douban.com/note/375861074/
http://www.douban.com/note/375861111/
http://www.douban.com/note/375861267/
http://www.douban.com/note/375861303/
http://www.douban.com/note/375861332/
http://www.douban.com/note/375861417/
http://www.douban.com/note/375861548/
http://www.douban.com/note/375861610/
http://www.douban.com/note/375861653/
http://www.douban.com/note/375861687/
http://www.douban.com/note/375861812/
http://www.douban.com/note/375861852/
http://www.douban.com/note/375861909/
http://www.douban.com/note/375861947/
http://www.douban.com/note/375861963/
http://www.douban.com/note/375861991/
http://www.douban.com/note/375862018/
http://www.douban.com/note/375862052/
http://www.douban.com/note/375862193/
http://www.douban.com/note/375862232/
http://www.douban.com/note/375862328/
http://www.douban.com/note/375862378/
http://www.douban.com/note/375862428/
http://www.douban.com/note/375862465/
http://www.douban.com/note/375862518/
http://www.douban.com/note/375862585/
http://www.douban.com/note/375862726/
http://www.douban.com/note/375862825/
http://www.douban.com/note/375862870/
http://www.douban.com/note/375862915/
http://www.douban.com/note/375862943/
http://www.douban.com/note/375862971/
http://www.douban.com/note/375863046/
http://www.douban.com/note/375863185/

http://www.douban.com/note/375864680/
http://www.douban.com/note/375864729/
http://www.douban.com/note/375864775/
http://www.douban.com/note/375864802/
http://www.douban.com/note/375864864/
http://www.douban.com/note/375864920/
http://www.douban.com/note/375864942/
http://www.douban.com/note/375865014/