jQuery Validate 插件介绍

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
该插件是由 J?rn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.13.1（截止：2015.05.26）。

自定义手机号验证代码

	// 手机号码验证
	jQuery.validator.addMethod("isMobile", function(value, element) {
		var length = value.length;
		var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
		return this.optional(element) || (length == 11 && mobile.test(value));
	}, "请正确填写您的手机号码");

验证表单

	$("#checkPhoneForm").validate({
		rules : {
			phone : {
				required : true,
				minlength : 11,
				// 自定义方法：校验手机号在数据库中是否存在
				// checkPhoneExist : true,
				isMobile : true
			},
			code : {
				digits : true,
				required : true
			}
		},
		messages : {
			phone : {
				required : "请输入手机号",
				minlength : "确认手机不能小于11个字符",
				isMobile : "请正确填写您的手机号码"
			},
			code : {
				required : "请输入验证码",
				digits : "验证码应该输入数字"
			}
		},
		errorPlacement : function(error, element) {
			error.appendTo(element.next().next());
		},
		ignore : ".codeCls"
	});

HTML

<form id="checkPhoneForm" class="am-form" action="${base?if_exists}/check-phone-succ.html" method="post" style="width: 100%;">
	<label for="phone" style="display: block;">手机号码:</label> 
	<input type="text" id="phone" name="phone" value="" maxlength="11" style="width: 220px; display: inline-block; margin-right: 20px;">
	
	<!-- 发送验证码按钮 -->
	<input type="button" id="btn" value="免费获取验证码" onclick="time(this);" />
	<span class="errorMsg" style="width: 200px; text-align: left; display: inline-block;"></span>
	<br> 
	<label for="code">验证码:</label>
	<!-- 输入验证码 --> 
	<input type="text" name="code" id="code" value="" maxlength="4" style="width: 220px;"> 
	<span style="width: 0px; text-align: left; display: inline-block;"></span>
	<!-- 存放错误提示信息 -->
	<span id="codeSpanId" class="errorMsg" style="width: 200px; text-align: left; display: inline-block;"></span>
	<br>
	<div class="am-cf">
		<input type="submit" id="subBtn" class="am-btn am-btn-primary am-btn-sm am-fl" value="下一步">
	</div>
</form>