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

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

 

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

 

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

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

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

上一篇:Url路径重写的原理


下一篇:解决jquery.validate.js的验证bug