jQuery validation plug-in Web front-end design pattern (asp.net)

Design goal: Build a universal web validation plug-in based on jQuery framework...

Design requirements: 1. Need beautiful css style and small icon decoration...
2. Based on jQuery framework.. .
3. Call the .net Web service to achieve asynchronous interaction with the database...

Solution: 1. First, let’s design three classes to display the visual appearance of the Web to the user. Perception. They are
.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;}
They are different styles for verification errors, verification warnings and correct verification...
2. Place the image in the corresponding position, as shown in the style, including MsgWarning.gif, MsgError.jpg, and MsgOk.gif are three small pictures corresponding to .msg_warning; .msg_error; .msg_ok;

3. Start writing the script
(1), //Remove the null value

Copy code The code is as follows:

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

This function is used to remove empty positions (trim) in the text box...

(2). Write two arrays to store prompt statements and styles when triggering verification...
var ErrorWords = ['Correct! ', 'Cannot be empty! ', 'E-mail address length cannot exceed 50 characters! ', 'Please enter the correct email format! ',"The password must be greater than 6 and less than 16!","The key does not match!",'The company name cannot exceed 50 digits! ',"Neither the area code nor the number is empty!","The area code is 4 digits!","The number is 7-10 digits!","The QQ number is 5-12 digits!",'The address length is not More than 50 people! ','The name must be in Chinese within 10 characters! ','The mobile phone number is 11 digits! ','The zip code is 6 digits! ','The username is between 3-15 digits! ','The domain name format is wrong! ','This username has been registered! ','This email address has been registered! ']

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), start writing Various validation types, I wrote all I could think of...

Copy code The code is as follows:

 
;(function($){ 
//as long as 
jQuery.fn.extend({ 
"checkEmail":function() // 
{ 
$(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|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|t|tv|tr|tm|tk|wf|vu|gt|ve|bn|ug|ua|uy| uz|es|eh|gr|hk|sg|nc|nz|hu|sy|jm|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] ""); 
}) 
} 
}) 
========================== ============================ 
//Folder Activities 
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] ""); 
}) 
} 
}) 
=============== ========================= ======== 
//If you want to run 
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(🎜>{ var check; 
var names=$(this).attr("name"); $("input[name='" names "']").eq(0).val( ); /; 
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; $("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 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] ""); 
}) 
} 
}) 
============================================== =========================================== 
//Closure The user's real name check uses the function to return the program result 
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; 
}) 
} 
}) 
================================== ================================================ 
//Closure mobile phone number 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] ""); 
}) 
} 
}) 
============================================== ================================================ 
//Closure zip code 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] ""); 
}) 
} 
}) 
================================================== ========================================== 

// Closure username check 
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("" ErrorWords[check] ""); 
}) 
} 
}) 

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

//Closure domain name verification
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] ""); 
}) 
} 
}) 
 
================================================== ==================================== 
//Verify whether the user name exists in the database (call WebService method) 
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.length<3||logname.length>15) 
{ 
 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] " "); 
} 
}) 
} 
}) 
} 
}) 

Corresponding Web service method:

Copy code The code is as follows:

 
///  
///Here we check whether the login name exists, here we are lazy and use random verification
///  
///  
///  
[WebMethod] 
public bool checkLogoName(string lognames) 
{ 
Random r = new Random(); 
int i = r.Next(1, 10000); 
if (i % 2 == 0) return true; 
return false; 
 } 
============================================== =========================================== 
//Verify user Whether the mailbox is in the database (method of calling Web service) 
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] ""); 
} 
}) 
} 
}) 
} 
}) 

Corresponding Web service method:

Copy code The code is as follows:

 
///  
/// Check whether the mailbox exists, here Lazy and use random verification
///  
///  
/// [WebMethod] 
public bool checkLogEmail(string logemails) 
{ 
Random r = new Random(); 
int i = r.Next(1, 10000); 
 if (i % 2 == 0) return true; 
return false; 
} 

====================== ================================================== ============= 
//Final submission
jQuery.fn.extend({ 
"toReg":function(num) //Please note the nun here, enable Write as many numbers as there are verifications, because I enabled all the above 15 verifications... 
{ 
$(this).click(function(){ 
var erolen=$(".msg_error ").length; 
var warlen=$(".msg_warning").length; 
var oklen=$(".msg_ok").length; 
if(oklen==num) 
 { alert("Verification passed..."); } 
else alert("Error: " erolen ", Warning: " warlen ", Pass: " oklen ", please fill in the information completely! "); 
}) 
} 
}) 
})(jQuery); 
====================== ================================================== ====================== 

4. Introduce scripts into the Web page

Copy code The code is as follows:

5. HTML source code of the Web page

Copy the code The code is as follows:

User login name verification:

Email verification:< ;input type="text" id="Emails"/>

Password verification: < ;br />

Change the password:

Company Name check:

Telephone: Area code:
-

Fax: Area code:
-

User QQ:

Company address:

User’s real name:

Mobile phone number verification:

Postcode verification:

Domain name verification:
< br /> Verification:

//This is the end

Design summary: There are still many imperfections, such as unexpected verification, There is also too much code redundancy. I hope I can improve it myself when using it...
Source code download address
http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar

jQuery validation plug-in Web front-end design pattern (asp.net)_jquery