Check username without refreshing Ajax + Javascript

Source: Internet
Author: User

Ajax + JavaScript check for the availability of user names without refreshing JavaScript code
<Script language = "JavaScript" type = "text/JavaScript">
VaR XMLHTTP = NULL;
Function createxmlhttp ()
{
If (window. activexobject)
{
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
XMLHTTP = new XMLHttpRequest ();
}
}
Function checka ()
{
Createxmlhttp ();
VaR txtname = Document. getelementbyid ("txt_name"); // obtain the input username Control
VaR labname = Document. getelementbyid ("lab_name"); // control that displays the prompt information
// Determine the user name format and length (only a combination of numbers and letters)
// Error 1
If (! Txtname. value. Match (/^ [a-zA-Z0-9] + $/) & txtname. value. Length <5 | txtname. value. length> 16)
{
Labname. style. color = "# cc0000 ";
Labname. value = "enter a user name of 6 to 12 characters, which can only be composed of digits and letters. ";
Return false;
} Else
// Correct
If (txtname. value. length> 5 & txtname. value. Length <17 & txtname. value. Match (/^ [a-zA-Z0-9] + $ /))
{
Labname. style. color = "# 0000ff ";
VaR url = "checkname. aspx? Username = "+ txtname. value;
XMLHTTP. Open ("Post", URL, true );
XMLHTTP. onreadystatechange = sub;
XMLHTTP. Send (null );
}
// Error 2
Else
{
Labname. style. color = "# cc0000 ";
Labname. value = "enter a user name of 6 to 12 characters, which can only be composed of digits and letters. ";
Return false;
}

}
Function Sub ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
Document. getelementbyid ("lab_name"). value = XMLHTTP. responsetext;
}
}
}

</SCRIPT>

HTML page controls and method calls
// Onfocus gets the cursor event. onblur: event when the cursor leaves
<Asp: textbox id = "txt_name" runat = "server" cssclass = "t_txt" onfocus = "checkname ();" onblur = "checka ();"> </ASP: textbox>
// Textbox I used, compatible with IE and Firefox styles
<Asp: textbox id = "lab_name" runat = "server" width = "300px" style = "border-top-style: none; border-width: 0px; border-left-style: none; border-bottom-style: none; border-right-style: none; "readonly =" true "> </ASP: textbox>

Create a page for specific data operations

SQL connection and statement ......

New Page Method
Protected void page_load (Object sender, eventargs E)
{
If (! Ispostback)
{
If (checknames (request. querystring ["username"]) = true)
{
Response. Write ("sorry, this user name is already in use! ");
}
Else
{
Response. Write ("congratulations, this user name can be used! ");
}
}

}

Private bool checknames (string username)
{
// Create a dataset
Dataset DS = new dataset ();
// Instantiate the model layer
Zyb_userlogin uimodel = new zyb_userlogin ();
// Encapsulate data
Uimodel. unl_userloginname = username;
// Instantiate the Business Layer
Userloginbll uibll = new userloginbll ();
Try
{
// Call the username check method at the Business Layer
DS = uibll. selectnamecheck (uimodel );
// Determine whether data exists
If (Ds. Tables [0]. Rows. Count <1)
{
// None indicates available
Return false;
}
Else
{
// Unavailable
Return true;
}
}
Catch (exception ex)
{
// Throw an exception
Throw ex;
}
}

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.