JQuery validation plug-in Web Front-end design mode (asp.net)

Purpose: To establish a universal Web verification plug-in based on the jQuery framework...

Design requirements: 1. Beautiful css styles and small icons are required...
2. Based on the jQuery framework...
3. Call the. net Web service to Implement Asynchronous interaction with the database...

Solution: 1. First, we design three categories to display the visual perception of the Web to users. 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 verification errors, verification warnings, and validation of the correct style...
2. The three pictures in the "Rotate" tab correspond to. msg_warning;. msg_error;. msg_ OK;

3. Start writing scripts.
(1), // remove null values
Copy codeThe Code is as follows:
String. prototype. trim = function ()
{
Var x = this;
X = x. replace (/^ \ s * (. *)/, "$1 ");
Return x;
}

This function is used to remove the null position (trim) in the text box )...

(2) write two arrays to store the prompt statement and style when triggering verification...
Var ErrorWords = ['correct! ',' Cannot be blank! ',' The length of the e-mail address cannot exceed 50 characters! ',' Enter the correct email format! ', "The password must be greater than 6, and less than 16! "," The key is not paired! ", 'The company name cannot exceed 50! ', "The area code and number are not empty! "," The area code is a four-digit number! "," 7-10 digits! "," QQ number is 5-12 digits! ", 'The address length cannot exceed 50 characters! ',' Is a Chinese character within 10 characters! ',' The mobile phone number is 11 digits! ',' The zip code is a six-digit number! ',' The username must be 3-15 characters long! ',' Domain name format error! ',' This user name 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']

(3) I started to write various verification types. I wrote all the information I could think...
Copy codeThe Code is as follows:
; (Function ($ ){
// Check the closure email address
JQuery. fn. extend ({
"CheckEmail": function () // encapsulate it into the 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 | 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 | u | 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> ");
})
}
})
========================================================== ==============================
// Closure password verification 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> ");
})
}
})
// Repeat the closure Password
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> ");
})
}
})
========================================================== ==========================================
// Check the closure company name
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> ");
})
}
})

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

// Closure company phone/fax 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 ("<span class = '" + ErrorClass [check] + "'>" + ErrorWords [check] + "</span> ");
})
}
})
========================================================== ========================================================== ========
// Closure QQ/MSN check
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> ");
})
}
})
========================================================== ========================================================== ========
// Check the closure address
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> ");
})
}
})
========================================================== ========================================================== ==========
// Check the real name of the closure user and use the function to return the program results
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;
})
}
})
========================================================== ========================================================== =
// Check the closure mobile phone number
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> ");
})
}
})
========================================================== ========================================================== ==============
// Zip code check of closure
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> ");
})
}
})
========================================================== ========================================================== ============

// Check the closure User Name
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> ");
})
}
})

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

// 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 ("<span class = '" + ErrorClass [check] + "'>" + ErrorWords [check] + "</span> ");
})
}
})

========================================================== ========================================================== ===
// Verify whether the user name exists in the Database (call the 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 ("<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> ");
}
})
}
})
}
})


Corresponding Web service methods:
Copy codeThe Code is as follows:
/// <Summary>
/// Check whether the logon name exists. If you are lazy, use random verification.
/// </Summary>
/// <Param name = "logName"> </param>
/// <Returns> </returns>
[WebMethod]
Public bool checkLogoName (string lognames)
{
Random r = new Random ();
Inti = r. Next (1, 10000 );
If (I % 2 = 0) return true;
Return false;
}
========================================================== ========================================================== ==========
// Verify whether the user's email address is in the database (the method to call the 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 | u | 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> ");
}
})
}
})
}
})

Corresponding Web service methods:
Copy codeThe Code is as follows:
/// <Summary>
/// Check whether the email address exists and use random verification for laziness
/// </Summary>
/// <Param name = "logemail"> </param>
/// <Returns> </returns>
[WebMethod]
Public bool checkLogEmail (string logemails)
{
Random r = new Random ();
Inti = r. Next (1, 10000 );
If (I % 2 = 0) return true;
Return false;
}

========================================================== ========================================================== =====
// Final submission
JQuery. fn. extend ({
"ToReg": function (num) // The nun here should note that the number of verification enabled is the number, because I have enabled all the above 15 verification...
{
$ (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 + ", by:" + oklen + ", please complete the information! ");
})
}
})
}) (JQuery );
========================================================== ========================================================== ==================

4. Introduce scripts on the Web page
Copy codeThe Code is as follows:
<Script src = "jqueryvaliation/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 (); // verify Email
$ ("# Codes"). checkCode (); // password verification box 1
$ ("# Codes2"). checkCode2 ("# Codes"); // verify Password box 2. The parameter is the ID of the first Password box.
$ ("# CPNames"). checkCPName (); // verify the company name
$ ("Input [name = 'tel']"). checkTel (); // verification phone number (format: the area code box and number box must be under the same name, such as tel)
$ ("Input [name = 'fax']"). checkTel (); // verify the fax (format: the area code box and number box must be under the same name, such as tel)
$ ("# QQs"). checkQQ (); // verify the QQ number
$ ("# CPAdds"). checkAdd (); // verify the company address
$ ("# RealName"). checkRealName (); // verify the real name. The name must be within 10 characters.
$ ("# Phones"). checkPhone (); // verify the mobile phone number, 11 digits
$ ("# PCodes"). checkPCode (); // verify the zip code, 6 digits
$ ("# UserName"). checkUserName (); // verify the user name
$ ("# WebSites"). checkSite (); // verify the URL
$ ("# UsernameAjax"). nameAjax ("checkLogoName", "lognames"); // function name in the Web service, parameter name; Method in WebService
$ ("# UemailAjax"). emailAjax ("checkLogEmail", "logemails"); // function name and parameter name in the Web service; Method in WebService

$ ("# Register"). toReg (15); // User Registration
})
</Script>

5. Web page HTML source code
Copy codeThe Code is as follows:
<Div>
User Login Name check: <input type = "text" id = "UserName"/> <br/>
Email verification: <input type = "text" id = "Emails"/> <br/>
Password verification: <input type = "password" id = "Codes"/> <br/>
Password pair: <input type = "password" id = "Codes2"/> <br/>
Company Name verification: <input type = "text" id = "CPNames"/> <br/>
Tel: area code: <input name = "tel" type = "text" id = "txtTel1" size = "8"/>
-
<Input name = "tel" type = "text" id = "txtTel2" size = "16"/>
<Br/>
Fax: area code: <input name = "fax" type = "text" id = "txtFax1" size = "8"/>
-
<Input name = "fax" type = "text" id = "txtFax2" size = "16"/> <br/>
User QQ: <input type = "text" id = "QQs"/> <br/>
Company address: <input type = "text" id = "CPAdds"/> <br/>
Real User name: <input type = "text" id = "RealName"/> <br/>
Mobile phone number verification: <input type = "text" id = "Phones"/> <br/>
Zip code verification: <input type = "text" id = "PCodes"/> <br/>
Domain name verification: <input type = "text" id = "WebSites" value = "htp: //"/> <br/>
(Database) User Name verification: <input type = "text" id = "usernameAjax"/> <br/>
(Database) User email verification: <input type = "text" id = "uemailAjax"/> <br/>
<Input type = "button" value = "Submit" id = "register"/>
</Div>
// All ends now


Design Summary: there are still some very imperfect aspects, such as unexpected verification, and the code redundancy is too large. I hope I can improve it myself when using it...
Source http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar