jQuery 验证插件 Web前端设计模式(asp.net)
jQuery 验证插件 Web前端设计模式(asp.net)
发布时间：2016-12-30 来源：查字典编辑
摘要：设计目标：建立一个基于jQuery框架的通用Web验证插件...设计要求：1.需要漂亮的css样式及小图标的润饰...2.基于jQuery框...

设计目标：建立一个基于jQuery框架的通用Web验证插件...

设计要求：1.需要漂亮的css样式及小图标的润饰...

2.基于jQuery框架...

3.调用.net Web 服务来实现与数据库的异步交互...

解决方案：1、首先，我们来设计三个类，分别用来显示Web给用户的视觉感知。它们分别是

.msg_warning{font-family:Arial,Helvetica,sans-serif,simsun; background:#e7f7ff url(register/MsgWarning.gif) no-repeat;border:solid 1px #6cf;color:#333;padding:0 0 0 36px !important;width:220px; margin-left:20px;}

.msg_error{font-family:Arial,Helvetica,sans-serif,simsun;background:#fff3ef url(register/MsgError.jpg) no-repeat;border:solid 1px #ff6610;color:#333;padding:0 0 0 36px !important;width:220px; margin-left:20px;}

.msg_ok{font-family:Arial,Helvetica,sans-serif,simsun;background:#e7ffe7 url(register/MsgOk.gif) no-repeat;border:solid 1px #95e895;color:#333;padding:0 0 0 36px !important;width:220px; margin-left:20px;}

分别是验证错误，验证警告和验证正确时候的不同样式...

2. 在相应的位置放置图片，如样式中的所示，包含MsgWarning.gif，MsgError.jpg，MsgOk.gif三张小图片分别对应.msg_warning；.msg_error；.msg_ok；

3.开始编写脚本

（1）、//去掉空值

复制代码 代码如下:

String.prototype.trim = function()

{

var x = this;

x = x.replace(/^s*(.*)/, "$1");

return x;

}

这个函数用以去掉文本框中的空位置（trim）...

（2）、写两个数组，用以存放触发验证时的提示语句和样式...

var ErrorWords = ['正确！', '不能为空！', 'E-mail地址长度不能超过50位！', '请输入正确的邮箱格式！',"密码必须大于6个，少于16个！","密钥不配对！",'公司名称不能超过50位！',"区号和号码均不为空！","区号为4位数字!","号码为7-10位的数字！","QQ号码为5-12位数字！",'地址长度不超过50位！','名字为10位以内的中文！','手机号为11位数字！','邮编为6位数字！','用户名为3-15位之间！','域名格式错误！','该用户名已注册！','该邮箱已被注册！']

var ErrorClass = ['msg_ok', 'msg_warning', 'msg_warning', 'msg_error', 'msg_warning', 'msg_error', 'msg_warning', 'msg_warning', 'msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error']

（3）、开始编写各种验证类型，我写了所有我能够想到的...

复制代码 代码如下:

;(function($){

//闭包邮箱核对

jQuery.fn.extend({

"checkEmail":function() //封装成checkEmail()函数

{

$(this).blur(function(){

var check;

var email=$(this).val().toLowerCase();

var strSuffix = "cc|com|edu|gov|int|net|org|biz|info|pro|name|coop|al|dz|af|ar|ae|aw|om|az|eg|et|ie|ee|ad|ao|ai|ag|at|au|mo|bb|pg|bs|pk|py|ps|bh|pa|br|by|bm|bg|mp|bj|be|is|pr|ba|pl|bo|bz|bw|bt|bf|bi|bv|kp|gq|dk|de|tl|tp|tg|dm|do|ru|ec|er|fr|fo|pf|gf|tf|va|ph|fj|fi|cv|fk|gm|cg|cd|co|cr|gg|gd|gl|ge|cu|gp|gu|gy|kz|ht|kr|nl|an|hm|hn|ki|dj|kg|gn|gw|ca|gh|ga|kh|cz|zw|cm|qa|ky|km|ci|kw|cc|hr|ke|ck|lv|ls|la|lb|lt|lr|ly|li|re|lu|rw|ro|mg|im|mv|mt|mw|my|ml|mk|mh|mq|yt|mu|mr|us|um|as|vi|mn|ms|bd|pe|fm|mm|md|ma|mc|mz|mx|nr|np|ni|ne|ng|nu|no|nf|na|za|aq|gs|eu|pw|pn|pt|jp|se|ch|sv|ws|yu|sl|sn|cy|sc|sa|cx|st|sh|kn|lc|sm|pm|vc|lk|sk|si|sj|sz|sd|sr|sb|so|tj|tw|th|tz|to|tc|tt|tn|tv|tr|tm|tk|wf|vu|gt|ve|bn|ug|ua|uy|uz|es|eh|gr|hk|sg|nc|nz|hu|sy|jm|am|ac|ye|iq|ir|il|it|in|id|uk|vg|io|jo|vn|zm|je|td|gi|cl|cf|cn";

var regu = "^[a-z0-9][_a-z0-9-]*([.][_a-z0-9-]+)*@([a-z0-9-_]+[.])+(" + strSuffix + ")$";

var re = new RegExp(regu);

if(email.trim()=='') check=1;

else if(email.length > 50) check=2;

else if(email.search(re) == -1) check=3;

else { check=0;}

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

===========================================================

//闭包密码验证s

jQuery.fn.extend({

"checkCode":function()

{

$(this).blur(function(){

var check;

var pwd=$(this).val();

var path = /^[a-zA-Z0-9_]{6,16}$/;

if(pwd.trim()=='') check=1;

else if(!path.test(pwd)) check=4;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

//闭包密码重复核对

jQuery.fn.extend({

"checkCode2":function(pwd)

{

$(this).blur(function(){

var check;

var pwd2=$(this).val();

if(pwd2.trim()=='') check=1;

else if(pwd2!=$(pwd).val()) check=5;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

===========================================================================

//闭包公司名称核对

jQuery.fn.extend({

"checkCPName":function()

{

$(this).blur(function(){

var check;

var CPName=$(this).val();

if(CPName.trim()=='') check=1;

else if(CPName.length>50) check=6;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

==========================================================================

//闭包公司电话/传真核对

jQuery.fn.extend({

"checkTel":function()

{

$(this).blur(function(){

var check;

var names=$(this).attr("name");

var check1=$("input[name='"+names+"']").eq(0).val();

var check2=$("input[name='"+names+"']").eq(1).val();

var path1 = /^[0-9]{4}$/;

var path2= /^[0-9]{7,10}$/;

if(check1.trim() == ''|| check2.trim()=='') check=7;

else if(!path1.test(check1)) check=8;

else if(!path2.test(check2)) check=9;

else check=0;

$("input[name='"+names+"']").eq(1).next().remove("span");

$("input[name='"+names+"']").eq(1).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

=======================================================================================

//闭包QQ/MSN核对

jQuery.fn.extend({

"checkQQ":function()

{

$(this).blur(function(){

var check;

var CPQQ=$(this).val();

var path= /^[0-9]{5,12}$/;

if(CPQQ.trim()=='') check=1;

else if(!path.test(CPQQ)) check=10;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

=======================================================================================

//闭包地址核对

jQuery.fn.extend({

"checkAdd":function()

{

$(this).blur(function(){

var check;

var CPAdd=$(this).val();

if(CPAdd.trim()=='') check=1;

else if(CPAdd.length>50) check=11;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

=========================================================================================

//闭包用户真实姓名核对 利用函数返回程序结果

jQuery.fn.extend({

"checkRealName":function()

{

var check;

$(this).blur(function(){

var realName=$(this).val();

var reg = /^[u4e00-u9fa5]{1,10}$/gi;

if(realName.trim()=='') check=1;

else if(!reg.test(realName)) check=12;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

return check;

})

}

})

=================================================================================

//闭包手机号码核对

jQuery.fn.extend({

"checkPhone":function()

{

$(this).blur(function(){

var check;

var telephone=$(this).val();

var reg=/^[0-9]{11}$/;

if(telephone.trim()=='') check=1;

else if(!reg.test(telephone)) check=13;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

===========================================================================================

//闭包邮编核对

jQuery.fn.extend({

"checkPCode":function()

{

$(this).blur(function(){

var check;

var PCode=$(this).val();

var reg=/^[0-9]{6}$/;

if(PCode=='') check=1;

else if(!reg.test(PCode)) check=14;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

==========================================================================================

//闭包用户名核对

jQuery.fn.extend({

"checkUserName":function()

{

$(this).blur(function(){

var check;

var UserName=$(this).val();

if(UserName=='') check=1;

else if(UserName.length<3 || UserName.length>15) check=15;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

================================================================================

//闭包域名验证

jQuery.fn.extend({

"checkSite":function()

{

$(this).blur(function(){

var check;

var WebSite=$(this).val();

var reg= /http(s)?://([w-]+.)+[w-]+(/[w- ./?%&=]*)?/;

if(WebSite=='') check=1;

else if(!reg.test(WebSite)) check=16;

else check=0;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

})

}

})

===================================================================================

//验证用户名是否存在数据库中(调用WebService方法)

jQuery.fn.extend({

"nameAjax":function(LName,Lfun)

{

$(this).blur(function(){

var check;

var thisid=$(this).attr("id");

var logname=$(this).val();

if(logname=='')

{

check=1;

$("#"+thisid).next().remove("span");

$("#"+thisid).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

}

else if(logname.length<3||logname.length>15)

{

check=15;

$(this).next().remove("span");

$(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

}

else

{

$.ajax({

type: "POST",

contentType:"application/json;utf-8",

url: "./WebService.asmx/"+LName,

data:"{"+Lfun+":'"+logname+"'}",

dataType: 'json',

anysc:false,

success:function(data)

{ if(data.d) check=17;

else check=0;

$("#"+thisid).next().remove("span");

$("#"+thisid).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

}

})

}

})

}

})

相对应的Web服务方法：

复制代码 代码如下:

/// <summary>

///这边核对登陆名是否存在，这边偷懒用随机验证

/// </summary>

/// <param name="logName"></param>

/// <returns></returns>

[WebMethod]

public bool checkLogoName(string lognames)

{

Random r = new Random();

int i = r.Next(1, 10000);

if (i % 2 == 0) return true;

return false;

}

=========================================================================================

//验证用户邮箱是否在数据库中（调用Web服务的方法）

jQuery.fn.extend({

"emailAjax":function(Lemail,Lfun)

{

$(this).blur(function(){

var check;

var thisid=$(this).attr("id");

var email=$(this).val().toLowerCase();

var strSuffix = "cc|com|edu|gov|int|net|org|biz|info|pro|name|coop|al|dz|af|ar|ae|aw|om|az|eg|et|ie|ee|ad|ao|ai|ag|at|au|mo|bb|pg|bs|pk|py|ps|bh|pa|br|by|bm|bg|mp|bj|be|is|pr|ba|pl|bo|bz|bw|bt|bf|bi|bv|kp|gq|dk|de|tl|tp|tg|dm|do|ru|ec|er|fr|fo|pf|gf|tf|va|ph|fj|fi|cv|fk|gm|cg|cd|co|cr|gg|gd|gl|ge|cu|gp|gu|gy|kz|ht|kr|nl|an|hm|hn|ki|dj|kg|gn|gw|ca|gh|ga|kh|cz|zw|cm|qa|ky|km|ci|kw|cc|hr|ke|ck|lv|ls|la|lb|lt|lr|ly|li|re|lu|rw|ro|mg|im|mv|mt|mw|my|ml|mk|mh|mq|yt|mu|mr|us|um|as|vi|mn|ms|bd|pe|fm|mm|md|ma|mc|mz|mx|nr|np|ni|ne|ng|nu|no|nf|na|za|aq|gs|eu|pw|pn|pt|jp|se|ch|sv|ws|yu|sl|sn|cy|sc|sa|cx|st|sh|kn|lc|sm|pm|vc|lk|sk|si|sj|sz|sd|sr|sb|so|tj|tw|th|tz|to|tc|tt|tn|tv|tr|tm|tk|wf|vu|gt|ve|bn|ug|ua|uy|uz|es|eh|gr|hk|sg|nc|nz|hu|sy|jm|am|ac|ye|iq|ir|il|it|in|id|uk|vg|io|jo|vn|zm|je|td|gi|cl|cf|cn";

var regu = "^[a-z0-9][_a-z0-9-]*([.][_a-z0-9-]+)*@([a-z0-9-_]+[.])+(" + strSuffix + ")$";

var re = new RegExp(regu);

if(email.trim()=='') { check=1;$(this).next().remove("span"); $(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); }

else if(email.length > 50) { check=2; $(this).next().remove("span"); $(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); }

else if(email.search(re) == -1) { check=3; $(this).next().remove("span"); $(this).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); }

else

{

$.ajax({

type: "POST",

contentType:"application/json;utf-8",

url: "./WebService.asmx/"+Lemail,

data:"{"+Lfun+":'"+email+"'}",

dataType: 'json',

anysc:false,

success:function(data)

{ if(data.d) check=18;

else check=0;

$("#"+thisid).next().remove("span");

$("#"+thisid).after("<span+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");

}

})

}

})

}

})

相对应的Web服务方法：

复制代码 代码如下:

/// <summary>

/// 核对邮箱是否存在，这边偷懒用随机验证

/// </summary>

/// <param name="logemail"></param>

/// <returns></returns>

[WebMethod]

public bool checkLogEmail(string logemails)

{

Random r = new Random();

int i = r.Next(1, 10000);

if (i % 2 == 0) return true;

return false;

}

=====================================================================================

//最终提交

jQuery.fn.extend({

"toReg":function(num) //这里的nun请注意，启用多少个验证就写多少数字，因为我将上面的15个验证都启用...

{

$(this).click(function(){

var erolen=$(".msg_error").length;

var warlen=$(".msg_warning").length;

var oklen=$(".msg_ok").length;

if(oklen==num)

{ alert("验证通过..."); }

else alert("错误："+erolen+",警告："+warlen+",通过："+oklen+",请完整填写信息！");

})

}

})

})(jQuery);

=============================================================================================

4、在Web页面引入脚本

复制代码 代码如下:

<script src="jQueryValidation/js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="jQueryValidation/js/wzh.Register.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#Emails").checkEmail();//验证Email

$("#Codes").checkCode();//验证密码框一

$("#Codes2").checkCode2("#Codes");//验证密码框二,参数为第一个密码框的ID

$("#CPNames").checkCPName();//验证公司名称

$("input[name='tel']").checkTel();//验证电话（格式：区号框和号码框需在同一个name下面，如tel）

$("input[name='fax']").checkTel();//验证传真（格式：区号框和号码框需在同一个name下面，如tel）

$("#QQs").checkQQ();//验证QQ号码

$("#CPAdds").checkAdd();//验证公司地址

$("#RealName").checkRealName();//验证真实姓名,10位以内的中文

$("#Phones").checkPhone();//验证移动电话号码，11位

$("#PCodes").checkPCode();//验证邮编 ，6位

$("#UserName").checkUserName();//验证用户名

$("#WebSites").checkSite();//验证网址

$("#usernameAjax").nameAjax("checkLogoName","lognames");//Web服务中的函数名，参数名；方法在WebService中

$("#uemailAjax").emailAjax("checkLogEmail","logemails");//Web服务中的函数名，参数名；方法在WebService中

$("#register").toReg(15);//用户注册

})

</script>

5.Web页面的HTML源码

复制代码 代码如下:

<div>

用户登录名核对：<input type="text" id="UserName" /><br /><br />

邮箱核对：<input type="text" id="Emails"/><br /><br />

密码核对：<input type="password" id="Codes"/><br /><br />

密码再对：<input type="password" id="Codes2"/><br /><br />

公司名称核对：<input type="text" id="CPNames"/><br /><br />

电话:区号：<input name="tel" type="text" id="txtTel1" size="8"/>

-

<input name="tel" type="text" id="txtTel2" size="16"/>

<br /><br />

传真:区号：<input name="fax" type="text" id="txtFax1" size="8" />

-

<input name="fax" type="text" id="txtFax2" size="16" /> <br /><br />

用户QQ：<input type="text" id="QQs"/><br /><br />

公司地址：<input type="text" id="CPAdds"/><br /><br />

用户真实姓名：<input type="text" id="RealName"/><br /><br />

手机号码核对：<input type="text" id="Phones"/><br /><br />

邮编核对：<input type="text" id="PCodes"/><br /><br />

域名验证：<input type="text" id="WebSites" value="htp://"/><br /><br />

（数据库）用户名验证：<input type="text" id="usernameAjax"/><br /><br />

（数据库）用户邮箱验证：<input type="text" id="uemailAjax"/><br /><br />

<input type="button" value="提交" id="register"/>

</div>

//至此全部结束

设计小结：还有很不不完善的地方，譬如未想到的验证，还有代码冗余度过大，希望使用的时候可以自己改良下...

源代码下载地址 http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类