【ca88yzc】Web前端设计形式,验证插件

Posted by

        设计场景:

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

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

      当我接手 企讯在线 (www.qx-zx.com)
的时候,确实犯难了,因为又要重复之前我在做 “亿网世界”
和“印刷在线”网站时候的繁琐工作,那就是编写用户注册页面的验证代码…

设计要求:1.需要漂亮的css样式及小图标的润饰…
2.基于jQuery框架…
3.调用.net 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;}

解决方案: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;}

      所以,我花了点时间将验证做成一个jQuery插件…

.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;

.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)、//去掉空值

3.开始编写脚本
(1)、//去掉空值

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

复制代码 代码如下:

复制代码 代码如下:

      

String.prototype.trim = function()
{
var x = this;
x = x.replace(/^\s*(.*)/, “$1”);
return x;
}

String.prototype.trim = function()
{
var x = this;
x = x.replace(/^\s*(.*)/, “$1”);
return x;
}

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

这个函数用以去掉文本框中的空位置(trim)…

这个函数用以去掉文本框中的空位置(trim)…

                   2.基于jQuery框架…

(2)、写两个数组,用以存放触发验证时的提示语句和样式…
var ErrorWords = [‘正确!’, ‘不能为空!’,
‘E-mail地址长度不能超过50位!’,
‘请输入正确的邮箱格式!’,”密码必须大于6个,少于16个!”,”密钥不配对!”,’公司名称不能超过50位!’,”区号和号码均不为空!”,”区号为4位数字!”,”号码为7-10位的数字!”,”QQ号码为5-12位数字!”,’地址长度不超过50位!’,’名字为10位以内的中文!’,’手机号为11位数字!’,’邮编为6位数字!’,’用户名为3-15位之间!’,’域名格式错误!’,’该用户名已注册!’,’该邮箱已被注册!’]

(2)、写两个数组,用以存放触发验证时的提示语句和样式…
var ErrorWords = [‘正确!’, ‘不能为空!’,
‘E-mail地址长度不能超过50位!’,
‘请输入正确的邮箱格式!’,”密码必须大于6个,少于16个!”,”密钥不配对!”,’公司名称不能超过50位!’,”区号和号码均不为空!”,”区号为4位数字!”,”号码为7-10位的数字!”,”QQ号码为5-12位数字!”,’地址长度不超过50位!’,’名字为10位以内的中文!’,’手机号为11位数字!’,’邮编为6位数字!’,’用户名为3-15位之间!’,’域名格式错误!’,’该用户名已注册!’,’该邮箱已被注册!’]

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

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’]

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)、开始编写各种验证类型,我写了所有我能够想到的…

(3)、开始编写各种验证类型,我写了所有我能够想到的…

     解决方案: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;}

;(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\-_]+[\.])+(“

;(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\-_]+[\.])+(“

                        
.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;}

  • 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>”);
    })
    }
    })

  • 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>”);
    })
    }
    })

                         .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;}

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

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

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

//闭包公司电话/传真核对
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>”);
})
}

//闭包公司电话/传真核对
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>”);
})
}

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

})

//闭包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>”);
})
}

})

//闭包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({
“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>”);
})
}

3.开始编写脚本

})

//闭包用户真实姓名核对 利用函数返回程序结果
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({
“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;
})
}

(1)、//去掉空值
String.prototype.trim = function()
{
    var x = this;
    x = x.replace(/^\s*(.*)/, “$1”);
    return x;
}

})

//闭包手机号码核对
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({
“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>”);
})
}

这个函数用以去掉文本框中的空位置(trim)…

})

//闭包邮编核对
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({
“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;

})

//闭包用户名核对
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;

(2)、写两个数组,用以存放触发验证时的提示语句和样式…

}

//验证用户邮箱是否在数据库中(调用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+”,请完整填写信息!”);
})
}
})

}

//验证用户邮箱是否在数据库中(调用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+”,请完整填写信息!”);
})
}
})

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

})(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
/>

})(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
/>

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’]

电话:区号:<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=”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>
//至此全部结束

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

/>

<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>
//至此全部结束

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


设计要求:1.需要漂亮的css样式及小图标的润饰… 2.基于jQuery框架…
3.调用.net Web 服…

(3)、开始编写各种验证类型,我写了所有我能够想到的…

您可能感兴趣的文章:

  • Asp.Net设计模式之单例模式详解
  • C#设计模式之Template模板方法模式实现ASP.NET自定义控件
    密码强度检测功能
  • 关于.NET
    Framework中的设计模式–应用策略模式为List排序
  • ASP.NET的适配器设计模式(Adapter)应用详解
  • .net设计模式之装饰模式(Decorator)

;(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>

//至此全部结束

 

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

可以参考我做过的51印刷网的注册页面,我就是采用这个写法的()…

 源代码下载地址()

 

相关文章

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注