本文介绍了一个基于jQuery框架的Web验证插件，包括样式设计、脚本编写、调用Web服务实现数据库验证等，提供了丰富的验证功能如邮箱、密码等。
设计目标： 建立一个基于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 >
- //至此全部结束
设计小结： 还有很不不完善的地方，譬如未想到的验证，还有代码冗余度过大，希望使用的时候可以自己改良下...
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
