Home > Developer > Web Develop
This interactive mode is often seen on the Internet. When registering a user name on a website, if no data is entered in the text box or the format of the data is incorrect, the text box is red to indicate that the entered content is incorrect.
I changed the text box verification method and used the get method for data processing: 1. When I click the submit button, if the text box is blank, the text box will become a red border. 2. When you enter the text box again, the red border disappears. Then, click Submit. 3. Use jquery's get method to call the general background processing program, process the foreground data, and return the value to the foreground.
Code:
Html code:
<Body> <link type = "text/css" rel = "stylesheet" href = "css/userVerify.css"/> <script type = "text/javascript" src = "js/ jquery. js "> </script> <script type =" text/javascript "src =" js/userVerify. js "> </script> <form id =" form1 "runat =" server "> <div> enter the User Name: <input id = "txtUserName" type = "text"/> <input id = "btnOk" type = "button" value = "Submit"/> </div> <div id = "result"> </div> </form> </body>
Js Code: two events are registered. 1. Click the submit button to click the event. 2. Text Box keyup event.
$ (Document ). ready (function () {// find the button and register the event $ ('# btnok '). click (function () {// find the txtUserName text box var txtUser =$ ("# txtUserName"); // obtain the text box content var userName = txtUser. val (); // send this content to the server if (userName. trim () = "") {// determines whether the content of the text box is empty $ ("# txtUserName "). addClass ("usertext") // Add a class to the text box and change the text box style} else {// call the server using the get method $. get ("HtmlPage1.ashx", {username: userName}, function (data) {// accept the data returned by the server to return the data to d $ ("# Result" ).html (data) ;}}); // locate the txtUserName text box and register the event $ ('# txtusername '). keyup (function () {// get the content var value in the current text box =$ (this ). val (); if (value! = "") {// Remove the text box class, and the border red style disappears $ (this). removeClass ("usertext ");}});});
General handler code:
Public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; string strUserName = context. request. queryString ["username"]; // obtain the username if (strUserName = "yq") {context. response. write ("this user already exists"); // return data} else {context. response. write ("Welcome to:" + strUserName); // return data }}
Css code:
. Usertext {border: 1px solid red;/* control the ripple under the text box */background-image: url (.. /imge/userVerify.gif); background-repeat: repeat-x; background-position: bottom ;}
Summary:
The entire instance code can be divided into two parts: 1. Use the removeClass and addClass methods of jQuery to control the text box style. 2. Use the get method of jQuery to pass the content in the text box to the background for processing.
Source Code address: http://download.csdn.net/detail/suneqing/7424611
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
