JQuery verification plug-in Web Front-end design mode (asp.net) _ jquery

The authentication code on the user registration page under asp.net took some time to make the authentication A jQuery plug-in, hoping to help the users who needed it. 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

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

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

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

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

// 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 ("" + 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 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 ("" + 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 methods:

The Code is as follows:

///

/// Check whether the logon name exists. If you are lazy, use random verification.
///
///
///
[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 ("" + 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 methods:

The Code is as follows:

///

/// Check whether the email address exists and use random verification for laziness
///
///
///
[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

The Code is as follows: