Heim > Web-Frontend > js-Tutorial > jQuery 验证插件 Web前端设计模式(asp.net)_jquery

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

WBOY
Freigeben: 2016-05-16 18:18:18
Original
1613 Leute haben es durchsucht

设计目标:建立一个基于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(""+ErrorWords[check]+"");
})
}
})
===========================================================
//闭包密码验证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(""+ErrorWords[check]+"");
})
}
})
//闭包密码重复核对
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(""+ErrorWords[check]+"");
})
}
})
===========================================================================
//闭包公司名称核对
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(""+ErrorWords[check]+"");
})
}
})

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

//闭包公司电话/传真核对
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(""+ErrorWords[check]+"");
})
}
})
=======================================================================================
//闭包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(""+ErrorWords[check]+"");
})
}
})
=======================================================================================
//闭包地址核对
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(""+ErrorWords[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(""+ErrorWords[check]+"");
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(""+ErrorWords[check]+"");
})
}
})
===========================================================================================
//闭包邮编核对
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(""+ErrorWords[check]+"");
})
}
})
==========================================================================================

//闭包用户名核对
jQuery.fn.extend({
"checkUserName":function()
{
$(this).blur(function(){
var check;
var UserName=$(this).val();
if(UserName=='') check=1;
else if(UserName.length15) check=15;
else check=0;
$(this).next().remove("span");
$(this).after(""+ErrorWords[check]+"");
})
}
})

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

//闭包域名验证
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(""+ErrorWords[check]+"");
})
}
})

===================================================================================
//验证用户名是否存在数据库中(调用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(""+ErrorWords[check]+"");
}
else if(logname.length15)
{
check=15;
$(this).next().remove("span");
$(this).after(""+ErrorWords[check]+"");
}
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(""+ErrorWords[check]+"");
}
})
}
})
}
})


相对应的Web服务方法:
复制代码 代码如下:

///
///这边核对登陆名是否存在,这边偷懒用随机验证
///

///
///
[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(""+ErrorWords[check]+""); }
else if(email.length > 50) { check=2; $(this).next().remove("span"); $(this).after(""+ErrorWords[check]+""); }
else if(email.search(re) == -1) { check=3; $(this).next().remove("span"); $(this).after(""+ErrorWords[check]+""); }
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(""+ErrorWords[check]+"");
}
})
}
})
}
})

相对应的Web服务方法:
复制代码 代码如下:

///
/// 核对邮箱是否存在,这边偷懒用随机验证
///

///
///
[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页面引入脚本
复制代码 代码如下:






5.Web页面的HTML源码
复制代码 代码如下:


用户登录名核对:


邮箱核对:


密码核对:


密码再对:


公司名称核对:


电话:区号:
-




传真:区号:
-



用户QQ:


公司地址:


用户真实姓名:


手机号码核对:


邮编核对:


域名验证:


(数据库)用户名验证:


(数据库)用户邮箱验证:




//至此全部结束


设计小结:还有很不不完善的地方,譬如未想到的验证,还有代码冗余度过大,希望使用的时候可以自己改良下...
源代码下载地址 http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage