User Registration Information Verification is often used in Web development. As long as user registration is involved, registration information verification is involved. The following describes how to use jquery to verify user registration information. Here, we use the example of verifying whether the user name already exists in the database to describe user registration information verification.
Running results in IE and Firefox:
The user name already exists:
The user name can be registered:
1. Before using jquery, check whether you have downloaded the library file of the jquery framework. If you have not downloaded the file, go to the official jquery website http://jquery.com/to download the latest file.
2. the development environment used in this demo is vs2008 + SQL server2005. First, create a website named Ajax and there is only one users table in the database,
3. Create a jquery. ASPX page, front-endCodeAs follows:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "jquery. aspx. cs" inherits = "jquery" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "head1" runat = "server">
<Title> user verification </title>
<% -- Connect to the JS file to be used. The jquery. Min. js file is the jquery library file, and the checkusers () function is written in the jquerycheck. js file -- %>
<SCRIPT src = "JS/jquerycheck. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "JS/jquery. Min. js" type = "text/JavaScript"> </SCRIPT>
<% -- Control the style of the verification result returned -- %>
<Link href = "CSS/checkuser.css" rel = "stylesheet" type = "text/CSS"/>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div class = "input"> User Name: </div> <Div class = "input"> <input id = "txtusername" type = "text" runat = "server"/> </div>
<Div class = "input"> <input id = "btncheck" type = "button" value = "check whether the user name exists" onclick = "checkusers () "/> </div> <Div id =" checkmsg "> </div>
<Asp: button id = "btnreg" runat = "server" text = "register" onclick = "btnreg_click"/>
<Asp: Label id = "lblmsg" runat = "server" forecolor = "red"> </ASP: Label>
</Form>
</Body>
</Html>
The jquery. aspx. CS Page code is as follows:
Code
Using system;
Using system. collections;
Using system. configuration;
Using system. Data;
Using system. LINQ;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. htmlcontrols;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. xml. LINQ;
Using system. Data. sqlclient;
Public partial class jquery: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
}
Protected void btnreg_click (Object sender, eventargs E)
{
// <Input type = "text" id = "txtusername" runat = "server"/>
// Events such as onblur may not be used to trigger functions in JavaScript files.
String username = txtusername. value;
// Configure connstr in the web. config file by yourself
Sqlconnection conn = new sqlconnection (configurationmanager. etettings ["connstr"]. tostring ());
Conn. open ();
Try
{
// Because you are also learning the stored procedure, you can use the Stored Procedure O (∩) O ~
Sqlcommand cmd = new sqlcommand ();
Cmd. Connection = conn;
Cmd. commandtext = "insertuser ";
Cmd. commandtype = commandtype. storedprocedure;
Cmd. Parameters. Add (New sqlparameter ("@ username", sqldbtype. varchar, 50 ));
Cmd. Parameters ["@ username"]. value = username;
Cmd. executenonquery ();
Lblmsg. Text = "registration successful! ";
}
Catch (exception ex)
{
Lblmsg. Text = "registration failed! ";
}
Finally
{
Conn. Close ();
}
}
}
4. The following is the code of the jquerycheck. js file:
Function checkusers ()
{
VaR username = Document. getelementbyid ("txtusername"). value;
$ (Document). Ready (function (){
$. Ajax ({
Type: "Get ",
URL: "checkurl. aspx? Username = "+ username,
Data: NULL,
Success: function (result ){
If (result = "usererror ")
{// When the returned data from the checkurl. ASPX page is usererror, it indicates that the user name already exists!
$ ("# Checkmsg"). removeclass ("checkright ");
$ ("# Checkmsg"). addclass ("checkerror ");
$ ("# Checkmsg"). Text ("the user name already exists! ");
// When the entered user name already exists, the Registration button is dimmed and cannot be used.
$ ("# Btnreg"). ATTR ("disabled", true );
}
Else if (result = "userright ")
{// When the returned data from the checkurl. ASPX page is userright, it indicates that the user name is still registered!
$ ("# Checkmsg"). removeclass ("checkerror ");
$ ("# Checkmsg"). addclass ("checkright ");
$ ("# Checkmsg"). Text ("the user name is not registered, available! ");
// When the entered user name is not registered, make the Registration button available
$ ("# Btnreg"). ATTR ("disabled", false );
}
}
});
});
}
5. Create a verification information processing page, that is, the checkurl. ASPX page called on the jquerycheck. js page. Leave the following code on the front-end page:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "checkurl. aspx. cs" inherits = "checkurl" %>
The background checkurl. aspx. CS Page code is as follows:
Using system;
Using system. collections;
Using system. configuration;
Using system. Data;
Using system. LINQ;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. htmlcontrols;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. xml. LINQ;
Using system. Data. sqlclient;
Public partial class checkurl: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
If (! Ispostback)
{
String username = request ["username"]. tostring ();
Sqlconnection conn = new sqlconnection (configurationmanager. etettings ["connstr"]. tostring ());
Conn. open ();
// Continue to use the Stored Procedure
Sqlcommand cmd = new sqlcommand ();
Cmd. Connection = conn;
Cmd. commandtext = "checkuser ";
Cmd. commandtype = commandtype. storedprocedure;
Cmd. Parameters. Add (New sqlparameter ("@ username", sqldbtype. varchar, 50 ));
Cmd. Parameters ["@ username"]. value = username;
Int result = convert. toint32 (CMD. executescalar ());
If (result> 0)
{// The result returned on the verification page mentioned above
Response. Write ("usererror ");
}
Else
{// The result returned on the verification page mentioned above
Response. Write ("userright ");
}
Conn. Close ();
}
}
}
6. the CSS Page code for controlling the page is as follows:
. Checkerror
{
Background-image: URL (../images/error.jpg );
Padding-left: 40px;
Font-size: 14px;
Height: 24px;
Padding-top: 6px;
Background-repeat: No-Repeat;
Float: left;
Width: 160px;
}
. Checkright
{
Background-image: URL (../images/right.jpg );
Padding-left: 40px;
Font-size: 14px;
Height: 24px;
Padding-top: 6px;
Background-repeat: No-Repeat;
Float: left;
Width: 160px;
}
. Input
{
Float: left;
}
7. The Stored Procedure Code involved in the above two files is as follows:
Create procedure [DBO]. [checkuser]
@ Username varchar (50)
As
Begin
Select count (*) from users where username = @ username
End
Create procedure [DBO]. [insertuser]
(
@ Username varchar (50)
)
As
Begin
Insert into users (username) values (@ username)
End
8. The demo is complete.
Below isSource codeDownload: In addition to jquery in the source code, there is also a page written in JavaScript. You can also refer to it for reference. I hope it will be helpful to you. If you have any questions, you can exchange ideas.
/Files/wanjiabao/ajax.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
