aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲

 

 

上面是效果，下面来说使用步骤

jQuery.Validate为我们提供了3种验证编写方式，各有优缺点：

1、在input对象中书写class样式指定验证规则或属性验证规则：

如<input type=”text” class=”required”/>

最简单、最便捷，提示消息使用jQuery.Validate的内置的消息（自定义扩展验证规则也属于此项），但是由于是以样式名的方式进行验证，导致了日后修改必须找到相应的input对象，同时无法使用高级验证规则，具体说明请向下看

2、同第1条，这种验证规则方式也是在input对象中书写class样式，只不过书写的方式改为了JSON格式，但是这种方式提供了自定义验证消息的支持：

如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>

简单、方便，但个人认为有点臃肿，还是和第1条一样和相对应的input对象纠缠在一起，并且还增加消息自定义，使得input对象变的更大了，干扰了页面代码的阅读，但可以使用高级验证规则（实际就是将第3种JS以JSON的格式放到具体的class中

3、这种方式使用纯JS的方式：

如：

$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}

})

})

很好的解决了HTML和验证规则的分离，就是书写较为麻烦，需要单独写JS脚本，但好处是可以统一验证规范，将每个页面的验证规则都写在头部的脚本中，方便日后维护。

下面我们就用第三种方法来演示一下

提前准备条件是：

(1):引入Jquery脚本 jquery-1.4.2.min.js

(2):引入Validate脚本 jquery.validate.js

(3):引入validate的扩展脚本validate_expand.js(也是我们自己手写的,符合中国国情的一些验证,例如大陆手机,电话区号等等)

 

这个也是最常用的，也就是除了上面的3个脚本需要引入之外，还需要引入我们自己写的规则 validateRules.js

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.validate.js"></script>
<script language="javascript" type="text/javascript" src="js/validate_expand.js"></script>
<script language="javascript" type="text/javascript" src="js/validateRules.js"></script>

下面就是validateRules.js的源码  也就是我们自己需要的验证哪些东西

/**
 * @author Administrator
 */
function initValidator(base){

	$("#thisForm").validate({
		onkeyup:false,
		//设置验证规则
		rules: {
			"userName": {
				required: true,
				userNameCheck: true
			},
			"passWord": {
				required: true,
				rangelength: [6, 12]
			},
			"passWordAgain": {
				required: true,
				rangelength: [6, 12],
				equalTo: "#passWord"
			},
			"corpName": {
				required: true
			},
			"sms": {
				required: true,
				isMobile: true
			},
			"email": {
				required: true,
				isEmail: true
			}
		},
		//设置错误信息
		messages: {
			"userName": {
				required: "请输入用户名",
				userNameCheck: "请输入4-20位字母开头的字母或数字和下划线"
			},
			"passWord": {
				required: "请输入密码",
				rangelength: "密码长度为6-12位"
			},
			"passWordAgain": {
				required: "请再次输入密码",
				rangelength: "密码长度为6-12位",
				equalTo: "两次输入密码不相同"
			},
			"corpName": {
				required: "请输入公司名称"
			},
			"sms": {
				required: "请输入手机号码",
				isMobile: "请输入有效的手机号码"
			},
			"email": {
				required: "请输入邮箱",
				isEmail: "请正确填写邮箱格式"
			}
		},
		errorElement:"font",//这个是表示,如果错误,我们要在错误的地方用什么标记来围住错误信息,这里是用<font></font>
		errorPlacement: function(error, element){
			error.appendTo(element.parent().find(".tipinfo"));
		},success:"valid"
	});

}

引入之后，我们在调用的页面里面还要加上

<script type="text/javascript">
$(document).ready(function(){
	initValidator();
});
</script>

调用的html如下

<form id="thisForm" method="post" action="">
	<table width="100%">
		<tr>
			<td class="tdcon">会员登录名：</td>
			<td>
				<input class="stext" type='text' name="userName" id="userName" value="" />
				<div class="tipinfo"></div>
			</td>
		</tr>
		<tr>
			<td class="tdcon">密码：</td>
			<td>
				<input class="stext" type="password" name="passWord" id="passWord" value="" />
				<div class="tipinfo"></div>
			</td>
		</tr>
		<tr>
			<td class="tdcon">再次输入密码：</td>
			<td>
				<input class="stext" type='password' name="passWordAgain" id="passWordAgain" value="" />
				<div class="tipinfo"></div>
			</td>
		</tr>
		<tr>
			<td class="tdcon">公司名称：</td>
			<td>
				<input class="stext" type='text' name="corpName" id="corpName" value="" />
				<div class="tipinfo"></div>
			</td>
		</tr>
		<tr>
			<td class="tdcon">手机号码：</td>
			<td>
				<input class="stext" type='text' name="sms" id="sms" value="" />
				<div class="tipinfo"></div>
			</td>
		</tr>
		<tr>
			<td class="tdcon">邮编：</td>
			<td>
				<input class="stext" type='text' name="email" id="email" value="" />
				<div class="tipinfo"></div>
			</td>
		</tr>
		<tr>
			<td></td>
			<td><button name="Submit" type="submit" class="Button BlueButton Button18">同意以下服务条款并注册</button></td>
		</tr>
	</table>
	</form>

 

 

最后，附带一下jquery.validate的扩展脚本 validate_expand.js ,有了这个,就可以自定义一下validate没有的验证了,更符合中国国情一些的验证，addMethod(name,method,message)是用来添加自定义的验证规则，示例如下：

/**
 * jquery.validate相关扩展验证
 *  validate_expand.js 
 */

//验证用户名
jQuery.validator.addMethod("userNameCheck", function(value, element) {
    return this.optional(element) || /^[a-zA-Z]\w{4,20}$/.test(value);
}, "请输入4-20位字母开头的字母或数字和下划线");

//字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");  

//邮政编码验证
jQuery.validator.addMethod("isEmail", function(value, element) {
    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])))$/.test(value);
}, "请正确填写邮箱格式");

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

//电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {
    var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");   

//联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
    var length = value.length;
    var mobile = /(^(13|14|15|18)\d{9}$)|(^0(([1,2]\d)|([3-9]\d{2}))\d{7,8}$)/;
    var tel = /^\d{3,4}-?\d{7,9}$/;
    return this.optional(element) || (tel.test(value) || mobile.test(value));   

}, "请正确填写您的联系电话");

 

常见的问题

1：显示的英文提示 ,没有中文

我们查看下jQuery.Validate源代码，在236行果然有提示消息的定义方式，我们就可以进行修改这边的消息改成中文的方式，或者自定义了一个中文的消息jQuery.Validate.message_cn.js，然后使用jQuery.extend来覆盖jQuery.Validate自身的消息，代码如下：

//定义中文消息
var cnmsg = {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
    minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
    rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
    range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
    max: jQuery.format("请输入一个最大为 {0} 的值"),
    min: jQuery.format("请输入一个最小为 {0} 的值")
};
jQuery.extend(jQuery.validator.messages, cnmsg);

这样只需在页面里面引用下jQuery.Validate.message_cn.js就可以把原有的英文提示给替换掉了，2种方式(修改原来的英文或者是自己添加中文)都是可取的，如果你想把jQuery.Validate改造成适合自己的验证控件就是用第1种方式直接改源代码，如果你只是想用些基本功能不想动原来的源代码就是用第2种方法。

2：在ASP.NET中按钮都会解析成submit所有都会触发验证，如果想让某个按钮不触发验证可以加上这个样式：class="cancel"

3：如果不想提交只想调试一下呢？  debug:true

4:jQuery.Validate仅能做客户端验证，并不能代替服务器端验证，为了系统的安全所以服务器端还是要进行验证的。

附带一个牛人写的全集介绍 [jQuery]使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由-目录及简介

花了一个多星期的时间总算把这使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由写完了，总共5篇，可能还有许多不足，欢迎大家的指点！

以下为具体的目录，方便大家的查看：

1、[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由

内容：为何选用jQuery.Validate进行客户端验证、jQuery.Validate的使用环境和使用jQuery.Validate进行简单的客户端验证。

2、[jQuery]使用jQuery.Validate进行客户端验证（中级篇-上）——不使用微软验证控件的理由

内容：jQuery.Validate的三种验证方式，同时对比列出了3种验证的优点及缺点，方便大家在实际开发中选取使用。

3、[jQuery]使用jQuery.Validate进行客户端验证（中级篇-下）——不使用微软验证控件的理由

内容：根据我在做项目时候碰到的问题总结介绍了jQuery.Validate在使用过程中经常会遇到的问题。

4、[jQuery]使用jQuery.Validate进行客户端验证（高级篇-上）——不使用微软验证控件的理由

内容：介绍了使用jQuery.Validate如何进行扩展验证和分组验证的实现方法。

5、[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由

内容：介绍了jQuery.Validate的AJAX验证方式，并对jQuery.Validate的AJAX验证进行修改及扩展，使得jQuery.Validate的AJAX验证可以支持从服务器端获取验证消息，同时还对jQuery.Validate的AJAX进行简单封装，简化了正常开发。

源代码下载：点我下载（已包含初级篇到高级篇所有实例）

注意：我实例中使用的版本为1.5.2，和1.7版本的代码有所不同，所以我实例中的扩展及修改可能无法适用于1.7！

官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

最新版本：1.7

新版本中增加了:

1、additional-methods.js-官方提供的扩展验证方法

2、一个新的DEMO:themerollered.html

如果想研究新的东西可以去下载最新的。