JQuery authentication plug-in Web front-end design mode (asp.net) _jquery

Design goal: Create a universal Web validation plug-in based on the jquery framework ...

Design requirements: 1. Need beautiful CSS style and small icons of the retouching ...
2. Based on the jquery framework ...
3. Call. NET Web services to implement asynchronous interactions with the database ...

Solution: 1, first, we will design three classes, respectively, to display the Web to the user's visual perception. Each of them is
. Msg_warning{font-family:arial,helvetica,sans-serif,simsun background: #e7f7ff URL (register/msgwarning.gif) No-repeat;border:solid 1px #6cf; color: #333;p adding: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;p adding: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;p adding:0 0 0 36px!important;width:220px; margin-left:20px;}
The differences are validation errors, validation warnings, and validation of different styles at the correct time ...
2. Place the picture in the appropriate position, as shown in the style, including msgwarning.gif,msgerror.jpg,msgok.gif three small pictures corresponding to each. Msg_warning;.msg_error;.msg_ok;

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

Copy Code code as follows:

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

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

(2), write two arrays to store the prompt statement and style when triggering validation ...
var errorwords = [' Right!] ', ' Can't be empty! ', ' e-mail address length can not exceed 50! ', ' Please enter the correct mailbox format! ', ' the password must be greater than 6, less than 16! "," The key does not match! ", ' the company name cannot exceed 50 bits! ', ' the area code and number are not empty! "," The area code is 4 digits! "," the number is 7-10 digits! "," QQ number is 5-12 digits! ", ' address length not exceeding 50 bits!" ', ' The name is within 10 Chinese! ', ' The mobile number is 11 digits! ', ' postcode is 6 digits! ', ' the username is between 3-15 bits! ', ' The domain name format is wrong! ', ' The user name has been registered! ', ' The mailbox 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), began to write various types of verification, I wrote all I can think of ...

Copy Code code as follows:

;(function ($) {
Closure mailbox Check
JQuery.fn.extend ({
"Checkemail": function ()//encapsulated into Checkemail () functions
{
$ (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 >) 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>");
})
}
})
===========================================================
Closed-pack 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>");
})
}
})
Closed-pack Password repeat 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 ("<span class= '" +errorclass[check]+ "' >" +errorwords[check]+ "</span>");
})
}
})
===========================================================================
Closure Company Name 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 ("<span class= '" +errorclass[check]+ "' >" +errorwords[check]+ "</span>");
})
}
})

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

Closure company telephone/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>");
})
}
})
=======================================================================================
Closure address 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 ("<span class= '" +errorclass[check]+ "' >" +errorwords[check]+ "</span>");
})
}
})
=========================================================================================
Closure user real name check use function return 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 ("<span class= '" +errorclass[check]+ "' >" +errorwords[check]+ "</span>");
return check;
})
}
})
=================================================================================
Closure cell 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 ("<span class= '" +errorclass[check]+ "' >" +errorwords[check]+ "</span>");
})
}
})
===========================================================================================
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 ("<span class= '" +errorclass[check]+ "' >" +errorwords[check]+ "</span>");
})
}
})
==========================================================================================

Closure User Name 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&GT;15) check=15;
else check=0;
$ (this). Next (). Remove ("span");
$ (this). After ("<span class= '" +errorclass[check]+ "' >" +errorwords[check]+ "</span>");
})
}
})

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

Closed-pack Domain 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 that 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&GT;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>");
}
})
}
})
}
})

The corresponding Web service method:

Copy Code code as follows:

<summary>
This side check whether the name exists, this lazy with random verification
</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;
}
=========================================================================================
Verify that the user's mailbox is in the database (the method that invokes 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|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;$ (). Next (). Remove (" span "); After (" <span class= "" +errorclass[check]+ " ' > ' +errorwords[check]+ "</span>"); }
else if (Email.length >) {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>");
}
})
}
})
}
})

The corresponding Web service method:

Copy Code code as follows:

<summary>
Check whether the mailbox exists, this side lazy with random verification
</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;
}

=====================================================================================
Final Submission
JQuery.fn.extend ({
"Toreg": function (num)//Here Nun please note how many validations are enabled to write the number, because I will enable the above 15 authentication ...
{
$ (this). Click (function () {
var erolen=$ (". Msg_error"). Length;
var warlen=$ (". msg_warning"). Length;
var oklen=$ (". Msg_ok"). Length;
if (oklen==num)
{Alert ("Verify passed ...");}
ELSE alert ("Error: +erolen+", Warning: "+warlen+", Through: "+oklen+", please complete the information! ");
})
}
})
}) (JQuery);
=============================================================================================

4, introduce the script in the Web page

Copy Code code as follows:

<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 ()//Verify Email
$ ("#Codes"). Checkcode ()//Verify Password box one
$ ("#Codes2"). CheckCode2 ("#Codes")//Verify Password box Two, parameter is the ID of the first password box
$ ("#CPNames"). Checkcpname ()//Verify company Name
$ ("Input[name= ' Tel ']"). Checktel ()//Verify Phone (format: The Area Code box and number box need to be under the same name, such as Tel)
$ ("input[name= ' fax ']"). Checktel ()//Verify Fax (format: The Area Code box and number box need to be under the same name, such as Tel)
$ ("#QQs"). CHECKQQ ()//Verify QQ number
$ ("#CPAdds"). Checkadd ()//Verify company Address
$ ("#RealName"). Checkrealname ()//Verify real name, within 10 digits of Chinese
$ ("#Phones"). Checkphone ()//Verify mobile phone number, 11 digits
$ ("#PCodes"). Checkpcode ()//Verify ZIP code, 6-digit
$ ("#UserName"). Checkusername ()//Verify user name
$ ("#WebSites"). Checksite ()//Verify URL
$ ("#usernameAjax"). Nameajax ("Checklogoname", "lognames"), function name in//web service, parameter name; method in WebService
$ ("#uemailAjax"). Emailajax ("Checklogemail", "logemails"), function name in//web service, parameter name; method in WebService

$ ("#register"). Toreg (15);//user Registration
})
</script>

5.Web page of HTML source code

Copy Code code as follows:

<div>
User Login name check: <input type= "text" id= "UserName"/><br/><br/>
Mailbox check: <input type= "text" id= "Emails"/><br/><br/>
Password check: <input type= "password" id= "codes"/><br/><br/>
Password again: <input type= "password" id= "Codes2"/><br/><br/>
Company Name check: <input type= "text" id= "cpnames"/><br/><br/>
Tel: Area code: <input name= "Tel" type= "text" id= "TxtTel1" size= "8"/>
-
<input name= "Tel" type= "text" id= "TxtTel2" size= ""/>
<br/><br/>
Fax: Area code: <input name= "Fax" type= "text" id= "TxtFax1" size= "8"/>
-
<input name= "Fax" type= "text" id= "TxtFax2" size= "a"/> <br/><br/>
User Qq:<input type= "text" id= "Qqs"/><br/><br/>
Company Address: <input type= "text" id= "Cpadds"/><br/><br/>
User's real name: <input type= "text" id= "realname"/><br/><br/>
Mobile phone number check: <input type= "text" id= "Phones"/><br/><br/>
Zip code check: <input type= "text" id= "pcodes"/><br/><br/>
Domain authentication: <input type= "text" id= "WebSites" value= "htp://"/><br/><br
(database) User name verification: <input type= "text" id= "Usernameajax"/><br/><br/>
(database) User mailbox authentication: <input type= "text" id= "Uemailajax"/><br/><br/>
<input type= "button" value= "Submit" id= "register"/>
</div>
It's all over now.

Design Summary: There are still very imperfect places, such as the failure to think of the verification, there is a large code redundancy, hope to use the time can be improved under their own ...
Source code Download Address Http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar