jQuery 验证插件 Web前端设计模式(asp.net)


Posted in Javascript onOctober 17, 2010

设计目标:建立一个基于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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+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 class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); 
} 
else if(logname.length<3||logname.length>15) 
{ 
check=15; 
$(this).next().remove("span"); 
$(this).after("<span class='"+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 class='"+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 class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); } 
else if(email.length > 50) { check=2; $(this).next().remove("span"); $(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); } 
else if(email.search(re) == -1) { check=3; $(this).next().remove("span"); $(this).after("<span class='"+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 class='"+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.3water.com/201010/yuanma/jqueryRegister.rar

Javascript 相关文章推荐
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
基本jquery的控制tabs打开的数量的代码
Oct 17 #Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 #Javascript
Javascript读取cookie函数代码
Oct 16 #Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 #Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 #Javascript
自己整理的一个javascript日期处理函数
Oct 16 #Javascript
理解Javascript_10_对象模型
Oct 16 #Javascript
You might like
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
ES6的新特性概览
2016/03/10 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
python 构造三维全零数组的方法
2018/11/12 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python程序慢的重要原因
2020/09/04 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
深圳茁壮笔试题
2015/05/28 面试题
销售提升方案
2014/06/07 职场文书
综治工作心得体会
2014/09/11 职场文书
白酒代理协议书范本
2014/10/26 职场文书
2014年维修工作总结
2014/11/22 职场文书
个人委托书范文
2015/01/28 职场文书
兵马俑导游词
2015/02/02 职场文书
司机个人年终总结
2015/03/03 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL