Simple custom jquery Verification

There are two verification cases: one is to directly use local verification, and the other is to use ajax to verify on the server.

I need to verify now: the user name, email address, and phone number are three input (text). The user name and phone number only need to be verified locally, as long as they match the given regular expression, the mailbox is first verified locally. If the correct format is met, Ajax will go to the server to verify whether the mailbox has been registered. If the mailbox is registered, it cannot pass the verification.

For each input followed by three States, the verification is passed, the verification fails, and the server is being submitted for verification. If the verification fails, a prompt is displayed.

First, design the server-side email verification. Here the. ashx file is used.

<% @ Webhandler Language = "C #" class = "validateemail" %>

Using system;
Using system. Web;
Using system. Data. sqlclient;

Public class validateemail: ihttphandler {

Public void processrequest (httpcontext context ){

If (context. Request. querystring. Count! = 0)
{
String email = context. Request. querystring [0]. Trim ();
Context. response. contenttype = "text/plain ";
Sqlconnection conn = new sqlconnection ("Server = localhost; user id = sa; Password =; database = xxx ");
Sqlcommand sqlcmd = new sqlcommand ("select count (*) from clients where email = @ email", Conn );
Sqlcmd. Parameters. addwithvalue ("@ email", email );

Try
{
Conn. open ();
Int result = (INT) sqlcmd. executescalar ();
Context. response. Write ("{message: '" + result. tostring () + "'}"); // The output is in JSON format.
}
Finally
{
Conn. Close ();
}
}

}

Public bool isreusable {
Get {
Return false;
}
}

}
Next, implement the HTML of the client and add references to jquery.

JS scriptCode:
// Add the needvalidate = 'true' attribute pairs for the input to be verified, select them, and add the Blur event function.
("Input [needvalidate = 'true']"). Blur (function ()
{
If (requirefield (this) // first verify the client
{
If (this. ID = 'your _ email ') // If the email is sent, perform Ajax server verification.
{
('%Email_img'%.html (" ");
. Getjson ("validateemail. ashx", {Email: This. Value}, processvalidateemail); // getjson gets the server-side Verification Result
}
Else
{
('{'{This.id}'_img'}.html (" ");
('{'{This.id}'_error'{.html ("");
}
}
}
)

});

// Processing function after Ajax verification is completed
Function processvalidateemail (data)
{
If (data. Message = "0") // indicates that the email address does not exist on the server.
{
('{Your_email_img'{.html (" ");
('{Your_email_error'{.html ("");
}
Else
{
('{Your_email_img'{.html (" ");
('{Your_email_error'{.html ("the email address has been registered. Please change it and try again! "). ATTR (" style "," color: red ;");
}
}

// Client verification function
Function requirefield (o)
{
VaR your_email =/^ ([a-zA-Z0-9 _\. \-]) + \ @ ([a-zA-Z0-9 \-]) + \.) + ([a-zA-Z0-9] {2, 4}) + /;
VaR your_name =/^ (\ W) {} | [^ u4e00-u9fa5 }/;
VaR your_tel =/^ [+] {0, 1} (\ D) {1, 3} []? ([-]? (\ D) | []) {1, 12}) + /;
VaR your_email_error = "enter the correct email format! ";
VaR your_name_error = "enter your name, not less than 4 characters! ";
VaR your_tel_error = "enter the correct phone number format! ";

If (O. value. Match (eval (O. ID )))
{
Return true;
}
Else
{
('{'{O.id}'_img'{.html (" ");
('{'{O.id}'_error'{.html (eval (O. ID + '_ error'). ATTR ("style", "color: red ;");
}
Return false;
}

// Verification function before submit
Function validate (){
VaR biaozhi = true;
("Input [needvalidate = 'true']"). Each (function (I ){
If (! Requirefield (this ))
{Biaozhi = false ;}
}
)
Return biaozhi;
}
Form code to be verified in HTML:

your name:

your mailbox:

your phone number:

related information: