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 相关文章推荐
js触发onchange事件的方法说明
Mar 08 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
基本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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
json跟xml的对比分析
2008/06/10 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python中xrange用法分析
2015/04/15 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
Django url 路由匹配过程详解
2021/01/22 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
《七颗钻石》教学反思
2014/02/28 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
学校四群教育实施方案
2014/06/12 职场文书
小学庆六一主持词
2015/06/30 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL