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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 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 foreach循环使用详解与实例代码
2010/05/08 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
php实现简单加入购物车功能
2017/03/07 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
PHP7新特性
2021/03/09 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
AngularJS快速入门
2015/04/02 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python学习 流程控制语句详解
2016/06/01 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python中remove函数的踩坑记录
2021/01/04 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
单位法定代表人授权委托书
2014/09/20 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
领导工作表现评语
2015/01/04 职场文书
学前班语言教学计划
2015/01/20 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
centos7安装mysql5.7经验记录
2022/05/02 Servers
Java实现简单小画板
2022/06/10 Java/Android