jQuery 驗(yàn)證插件 Web前端設(shè)計(jì)模式(asp.net)
更新時(shí)間:2010年10月17日 23:16:49 作者:
asp.net下用戶注冊(cè)頁(yè)面的驗(yàn)證代碼,花了點(diǎn)時(shí)間將驗(yàn)證做成一個(gè)jQuery插件,希望對(duì)需要的朋友有所幫助。
設(shè)計(jì)目標(biāo):建立一個(gè)基于jQuery框架的通用Web驗(yàn)證插件...
設(shè)計(jì)要求:1.需要漂亮的css樣式及小圖標(biāo)的潤(rùn)飾...
2.基于jQuery框架...
3.調(diào)用.net Web 服務(wù)來(lái)實(shí)現(xiàn)與數(shù)據(jù)庫(kù)的異步交互...
解決方案:1、首先,我們來(lái)設(shè)計(jì)三個(gè)類(lèi),分別用來(lái)顯示W(wǎng)eb給用戶的視覺(jué)感知。它們分別是
.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;}
分別是驗(yàn)證錯(cuò)誤,驗(yàn)證警告和驗(yàn)證正確時(shí)候的不同樣式...
2. 在相應(yīng)的位置放置圖片,如樣式中的所示,包含MsgWarning.gif,MsgError.jpg,MsgOk.gif三張小圖片分別對(duì)應(yīng).msg_warning;.msg_error;.msg_ok;
3.開(kāi)始編寫(xiě)腳本
(1)、//去掉空值
String.prototype.trim = function()
{
var x = this;
x = x.replace(/^\s*(.*)/, "$1");
return x;
}
這個(gè)函數(shù)用以去掉文本框中的空位置(trim)...
(2)、寫(xiě)兩個(gè)數(shù)組,用以存放觸發(fā)驗(yàn)證時(shí)的提示語(yǔ)句和樣式...
var ErrorWords = ['正確!', '不能為空!', 'E-mail地址長(zhǎng)度不能超過(guò)50位!', '請(qǐng)輸入正確的郵箱格式!',"密碼必須大于6個(gè),少于16個(gè)!","密鑰不配對(duì)!",'公司名稱(chēng)不能超過(guò)50位!',"區(qū)號(hào)和號(hào)碼均不為空!","區(qū)號(hào)為4位數(shù)字!","號(hào)碼為7-10位的數(shù)字!","QQ號(hào)碼為5-12位數(shù)字!",'地址長(zhǎng)度不超過(guò)50位!','名字為10位以內(nèi)的中文!','手機(jī)號(hào)為11位數(shù)字!','郵編為6位數(shù)字!','用戶名為3-15位之間!','域名格式錯(cuò)誤!','該用戶名已注冊(cè)!','該郵箱已被注冊(cè)!']
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)、開(kāi)始編寫(xiě)各種驗(yàn)證類(lèi)型,我寫(xiě)了所有我能夠想到的...
;(function($){
//閉包郵箱核對(duì)
jQuery.fn.extend({
"checkEmail":function() //封裝成checkEmail()函數(shù)
{
$(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>");
})
}
})
===========================================================
//閉包密碼驗(yàn)證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>");
})
}
})
//閉包密碼重復(fù)核對(duì)
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>");
})
}
})
===========================================================================
//閉包公司名稱(chēng)核對(duì)
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>");
})
}
})
==========================================================================
//閉包公司電話/傳真核對(duì)
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核對(duì)
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>");
})
}
})
=======================================================================================
//閉包地址核對(duì)
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>");
})
}
})
=========================================================================================
//閉包用戶真實(shí)姓名核對(duì) 利用函數(shù)返回程序結(jié)果
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;
})
}
})
=================================================================================
//閉包手機(jī)號(hào)碼核對(duì)
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>");
})
}
})
===========================================================================================
//閉包郵編核對(duì)
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>");
})
}
})
==========================================================================================
//閉包用戶名核對(duì)
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>");
})
}
})
================================================================================
//閉包域名驗(yàn)證
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>");
})
}
})
===================================================================================
//驗(yàn)證用戶名是否存在數(shù)據(jù)庫(kù)中(調(diào)用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>");
}
})
}
})
}
})
相對(duì)應(yīng)的Web服務(wù)方法:
/// <summary>
///這邊核對(duì)登陸名是否存在,這邊偷懶用隨機(jī)驗(yàn)證
/// </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;
}
=========================================================================================
//驗(yàn)證用戶郵箱是否在數(shù)據(jù)庫(kù)中(調(diào)用Web服務(wù)的方法)
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>");
}
})
}
})
}
})
相對(duì)應(yīng)的Web服務(wù)方法:
/// <summary>
/// 核對(duì)郵箱是否存在,這邊偷懶用隨機(jī)驗(yàn)證
/// </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請(qǐng)注意,啟用多少個(gè)驗(yàn)證就寫(xiě)多少數(shù)字,因?yàn)槲覍⑸厦娴?5個(gè)驗(yàn)證都啟用...
{
$(this).click(function(){
var erolen=$(".msg_error").length;
var warlen=$(".msg_warning").length;
var oklen=$(".msg_ok").length;
if(oklen==num)
{ alert("驗(yàn)證通過(guò)..."); }
else alert("錯(cuò)誤:"+erolen+",警告:"+warlen+",通過(guò):"+oklen+",請(qǐng)完整填寫(xiě)信息!");
})
}
})
})(jQuery);
=============================================================================================
4、在Web頁(yè)面引入腳本
<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();//驗(yàn)證Email
$("#Codes").checkCode();//驗(yàn)證密碼框一
$("#Codes2").checkCode2("#Codes");//驗(yàn)證密碼框二,參數(shù)為第一個(gè)密碼框的ID
$("#CPNames").checkCPName();//驗(yàn)證公司名稱(chēng)
$("input[name='tel']").checkTel();//驗(yàn)證電話(格式:區(qū)號(hào)框和號(hào)碼框需在同一個(gè)name下面,如tel)
$("input[name='fax']").checkTel();//驗(yàn)證傳真(格式:區(qū)號(hào)框和號(hào)碼框需在同一個(gè)name下面,如tel)
$("#QQs").checkQQ();//驗(yàn)證QQ號(hào)碼
$("#CPAdds").checkAdd();//驗(yàn)證公司地址
$("#RealName").checkRealName();//驗(yàn)證真實(shí)姓名,10位以內(nèi)的中文
$("#Phones").checkPhone();//驗(yàn)證移動(dòng)電話號(hào)碼,11位
$("#PCodes").checkPCode();//驗(yàn)證郵編 ,6位
$("#UserName").checkUserName();//驗(yàn)證用戶名
$("#WebSites").checkSite();//驗(yàn)證網(wǎng)址
$("#usernameAjax").nameAjax("checkLogoName","lognames");//Web服務(wù)中的函數(shù)名,參數(shù)名;方法在WebService中
$("#uemailAjax").emailAjax("checkLogEmail","logemails");//Web服務(wù)中的函數(shù)名,參數(shù)名;方法在WebService中
$("#register").toReg(15);//用戶注冊(cè)
})
</script>
5.Web頁(yè)面的HTML源碼
<div>
用戶登錄名核對(duì):<input type="text" id="UserName" /><br /><br />
郵箱核對(duì):<input type="text" id="Emails"/><br /><br />
密碼核對(duì):<input type="password" id="Codes"/><br /><br />
密碼再對(duì):<input type="password" id="Codes2"/><br /><br />
公司名稱(chēng)核對(duì):<input type="text" id="CPNames"/><br /><br />
電話:區(qū)號(hào):<input name="tel" type="text" id="txtTel1" size="8"/>
-
<input name="tel" type="text" id="txtTel2" size="16"/>
<br /><br />
傳真:區(qū)號(hào):<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 />
用戶真實(shí)姓名:<input type="text" id="RealName"/><br /><br />
手機(jī)號(hào)碼核對(duì):<input type="text" id="Phones"/><br /><br />
郵編核對(duì):<input type="text" id="PCodes"/><br /><br />
域名驗(yàn)證:<input type="text" id="WebSites" value="htp://"/><br /><br />
(數(shù)據(jù)庫(kù))用戶名驗(yàn)證:<input type="text" id="usernameAjax"/><br /><br />
(數(shù)據(jù)庫(kù))用戶郵箱驗(yàn)證:<input type="text" id="uemailAjax"/><br /><br />
<input type="button" value="提交" id="register"/>
</div>
//至此全部結(jié)束
設(shè)計(jì)小結(jié):還有很不不完善的地方,譬如未想到的驗(yàn)證,還有代碼冗余度過(guò)大,希望使用的時(shí)候可以自己改良下...
源代碼下載地址 http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar
設(shè)計(jì)要求:1.需要漂亮的css樣式及小圖標(biāo)的潤(rùn)飾...
2.基于jQuery框架...
3.調(diào)用.net Web 服務(wù)來(lái)實(shí)現(xiàn)與數(shù)據(jù)庫(kù)的異步交互...
解決方案:1、首先,我們來(lái)設(shè)計(jì)三個(gè)類(lèi),分別用來(lái)顯示W(wǎng)eb給用戶的視覺(jué)感知。它們分別是
.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;}
分別是驗(yàn)證錯(cuò)誤,驗(yàn)證警告和驗(yàn)證正確時(shí)候的不同樣式...
2. 在相應(yīng)的位置放置圖片,如樣式中的所示,包含MsgWarning.gif,MsgError.jpg,MsgOk.gif三張小圖片分別對(duì)應(yīng).msg_warning;.msg_error;.msg_ok;
3.開(kāi)始編寫(xiě)腳本
(1)、//去掉空值
復(fù)制代碼 代碼如下:
String.prototype.trim = function()
{
var x = this;
x = x.replace(/^\s*(.*)/, "$1");
return x;
}
這個(gè)函數(shù)用以去掉文本框中的空位置(trim)...
(2)、寫(xiě)兩個(gè)數(shù)組,用以存放觸發(fā)驗(yàn)證時(shí)的提示語(yǔ)句和樣式...
var ErrorWords = ['正確!', '不能為空!', 'E-mail地址長(zhǎng)度不能超過(guò)50位!', '請(qǐng)輸入正確的郵箱格式!',"密碼必須大于6個(gè),少于16個(gè)!","密鑰不配對(duì)!",'公司名稱(chēng)不能超過(guò)50位!',"區(qū)號(hào)和號(hào)碼均不為空!","區(qū)號(hào)為4位數(shù)字!","號(hào)碼為7-10位的數(shù)字!","QQ號(hào)碼為5-12位數(shù)字!",'地址長(zhǎng)度不超過(guò)50位!','名字為10位以內(nèi)的中文!','手機(jī)號(hào)為11位數(shù)字!','郵編為6位數(shù)字!','用戶名為3-15位之間!','域名格式錯(cuò)誤!','該用戶名已注冊(cè)!','該郵箱已被注冊(cè)!']
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)、開(kāi)始編寫(xiě)各種驗(yàn)證類(lèi)型,我寫(xiě)了所有我能夠想到的...
復(fù)制代碼 代碼如下:
;(function($){
//閉包郵箱核對(duì)
jQuery.fn.extend({
"checkEmail":function() //封裝成checkEmail()函數(shù)
{
$(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>");
})
}
})
===========================================================
//閉包密碼驗(yàn)證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>");
})
}
})
//閉包密碼重復(fù)核對(duì)
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>");
})
}
})
===========================================================================
//閉包公司名稱(chēng)核對(duì)
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>");
})
}
})
==========================================================================
//閉包公司電話/傳真核對(duì)
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核對(duì)
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>");
})
}
})
=======================================================================================
//閉包地址核對(duì)
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>");
})
}
})
=========================================================================================
//閉包用戶真實(shí)姓名核對(duì) 利用函數(shù)返回程序結(jié)果
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;
})
}
})
=================================================================================
//閉包手機(jī)號(hào)碼核對(duì)
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>");
})
}
})
===========================================================================================
//閉包郵編核對(duì)
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>");
})
}
})
==========================================================================================
//閉包用戶名核對(duì)
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>");
})
}
})
================================================================================
//閉包域名驗(yàn)證
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>");
})
}
})
===================================================================================
//驗(yàn)證用戶名是否存在數(shù)據(jù)庫(kù)中(調(diào)用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>");
}
})
}
})
}
})
相對(duì)應(yīng)的Web服務(wù)方法:
復(fù)制代碼 代碼如下:
/// <summary>
///這邊核對(duì)登陸名是否存在,這邊偷懶用隨機(jī)驗(yàn)證
/// </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;
}
=========================================================================================
//驗(yàn)證用戶郵箱是否在數(shù)據(jù)庫(kù)中(調(diào)用Web服務(wù)的方法)
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>");
}
})
}
})
}
})
相對(duì)應(yīng)的Web服務(wù)方法:
復(fù)制代碼 代碼如下:
/// <summary>
/// 核對(duì)郵箱是否存在,這邊偷懶用隨機(jī)驗(yàn)證
/// </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請(qǐng)注意,啟用多少個(gè)驗(yàn)證就寫(xiě)多少數(shù)字,因?yàn)槲覍⑸厦娴?5個(gè)驗(yàn)證都啟用...
{
$(this).click(function(){
var erolen=$(".msg_error").length;
var warlen=$(".msg_warning").length;
var oklen=$(".msg_ok").length;
if(oklen==num)
{ alert("驗(yàn)證通過(guò)..."); }
else alert("錯(cuò)誤:"+erolen+",警告:"+warlen+",通過(guò):"+oklen+",請(qǐng)完整填寫(xiě)信息!");
})
}
})
})(jQuery);
=============================================================================================
4、在Web頁(yè)面引入腳本
復(fù)制代碼 代碼如下:
<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();//驗(yàn)證Email
$("#Codes").checkCode();//驗(yàn)證密碼框一
$("#Codes2").checkCode2("#Codes");//驗(yàn)證密碼框二,參數(shù)為第一個(gè)密碼框的ID
$("#CPNames").checkCPName();//驗(yàn)證公司名稱(chēng)
$("input[name='tel']").checkTel();//驗(yàn)證電話(格式:區(qū)號(hào)框和號(hào)碼框需在同一個(gè)name下面,如tel)
$("input[name='fax']").checkTel();//驗(yàn)證傳真(格式:區(qū)號(hào)框和號(hào)碼框需在同一個(gè)name下面,如tel)
$("#QQs").checkQQ();//驗(yàn)證QQ號(hào)碼
$("#CPAdds").checkAdd();//驗(yàn)證公司地址
$("#RealName").checkRealName();//驗(yàn)證真實(shí)姓名,10位以內(nèi)的中文
$("#Phones").checkPhone();//驗(yàn)證移動(dòng)電話號(hào)碼,11位
$("#PCodes").checkPCode();//驗(yàn)證郵編 ,6位
$("#UserName").checkUserName();//驗(yàn)證用戶名
$("#WebSites").checkSite();//驗(yàn)證網(wǎng)址
$("#usernameAjax").nameAjax("checkLogoName","lognames");//Web服務(wù)中的函數(shù)名,參數(shù)名;方法在WebService中
$("#uemailAjax").emailAjax("checkLogEmail","logemails");//Web服務(wù)中的函數(shù)名,參數(shù)名;方法在WebService中
$("#register").toReg(15);//用戶注冊(cè)
})
</script>
5.Web頁(yè)面的HTML源碼
復(fù)制代碼 代碼如下:
<div>
用戶登錄名核對(duì):<input type="text" id="UserName" /><br /><br />
郵箱核對(duì):<input type="text" id="Emails"/><br /><br />
密碼核對(duì):<input type="password" id="Codes"/><br /><br />
密碼再對(duì):<input type="password" id="Codes2"/><br /><br />
公司名稱(chēng)核對(duì):<input type="text" id="CPNames"/><br /><br />
電話:區(qū)號(hào):<input name="tel" type="text" id="txtTel1" size="8"/>
-
<input name="tel" type="text" id="txtTel2" size="16"/>
<br /><br />
傳真:區(qū)號(hào):<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 />
用戶真實(shí)姓名:<input type="text" id="RealName"/><br /><br />
手機(jī)號(hào)碼核對(duì):<input type="text" id="Phones"/><br /><br />
郵編核對(duì):<input type="text" id="PCodes"/><br /><br />
域名驗(yàn)證:<input type="text" id="WebSites" value="htp://"/><br /><br />
(數(shù)據(jù)庫(kù))用戶名驗(yàn)證:<input type="text" id="usernameAjax"/><br /><br />
(數(shù)據(jù)庫(kù))用戶郵箱驗(yàn)證:<input type="text" id="uemailAjax"/><br /><br />
<input type="button" value="提交" id="register"/>
</div>
//至此全部結(jié)束
設(shè)計(jì)小結(jié):還有很不不完善的地方,譬如未想到的驗(yàn)證,還有代碼冗余度過(guò)大,希望使用的時(shí)候可以自己改良下...
源代碼下載地址 http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar
您可能感興趣的文章:
- jQuery驗(yàn)證插件 Validate詳解
- jQuery驗(yàn)證插件validate使用方法詳解
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jQuery驗(yàn)證插件validation使用指南
- jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式
- jQuery formValidator表單驗(yàn)證插件開(kāi)源了 含API幫助、源碼、示例
- jquery表單驗(yàn)證插件formValidator使用方法
- jQuery表單驗(yàn)證插件formValidator(改進(jìn)版)
- jQuery Validate表單驗(yàn)證插件 添加class屬性形式的校驗(yàn)
- jquery實(shí)現(xiàn)簡(jiǎn)易驗(yàn)證插件封裝
相關(guān)文章
animate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】
下面小編就為大家?guī)?lái)一篇animate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery插件分享之分頁(yè)插件jqPagination
jqPagination 是一個(gè)簡(jiǎn)單易用的輕量級(jí) jQuery分頁(yè)插件,其使用了 HTML5 和 CSS3 技術(shù)來(lái)實(shí)現(xiàn)。此插件提供了幾個(gè)參數(shù)設(shè)置選項(xiàng),通過(guò)簡(jiǎn)單的配置即可生成分頁(yè)控件。此外,它的外觀樣式是可自定義的,擴(kuò)展性很強(qiáng)。2014-06-06JQuery 獲得絕對(duì),相對(duì)位置的坐標(biāo)方法
獲取頁(yè)面某一元素的絕對(duì)X,Y坐標(biāo),可以用offset()方法:(body屬性設(shè)置margin :0;padding:0;)2010-02-02jQuery實(shí)現(xiàn)監(jiān)控頁(yè)面所有ajax請(qǐng)求的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)監(jiān)控頁(yè)面所有ajax請(qǐng)求的方法,涉及jQuery中ajax請(qǐng)求的判定技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10jQuery選中select控件 無(wú)法設(shè)置selected的解決方法
select 控件的 option用jQuery動(dòng)態(tài)添加,然后選中某項(xiàng)時(shí),IE6不能執(zhí)行(火狐沒(méi)問(wèn)題),用try{}catch(err){alert(err.description);}提示為“無(wú)法設(shè)置selected屬性 未指明的錯(cuò)誤”2010-09-09