Home > Developer > Web Develop
This interaction is often seen online, when going to a site to register username, assuming that there is no input data in the text box, or the data input content format is not correct. It will turn the text box red to indicate that you are entering the wrong content.
I changed the way the text box was validated and used the Get method for data processing: 1. When you click the Submit button, if the text box is empty, the text box becomes a red border. 2. When you re-enter the text box, the red border disappears. Click Submit after entering.
3. Use jquery's Get method to invoke the background general handler, process the foreground data, and return the value to the foreground after processing.
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> Please enter username: <input id= " txtUserName "type=" text "/><input id=" Btnok "type=" button "value=" Submit "/> </div> <div id=" Result "> </div> </form></body>
JS Code: Two events 1. Submit a button click event.
2. Text box KeyUp event.
$ (document). Ready (function () { //Locate button button, register event $ (' #btnOk '). Click (function () { //Find txtUserName text box var txtuser = $ ("#txtUserName"); Get text box contents var userName = Txtuser.val (); Send this content to the server if (username.trim () = = "") { //infer whether the contents of the text box are empty $ ("#txtUserName"). AddClass ("Usertext")// Add class to the text box, change the text box style } else { //Use the Get method to invoke the server-side $.get ("Htmlpage1.ashx", {username:username}, function ( Data) { //accepts the data returned by the server to the div in $ ("#result"). HTML (data);} );} ); Locate the txtUserName text box. Register Event $ (' #txtUserName '). KeyUp (function () { //Gets the contents of the current text box var value = $ (this). Val (); if (value!= ") { //Remove text box class. 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"]; Gets the foreground username if (strUserName = = "Yq") { context. Response.Write ("The user exists"); Returns the data } else { context. Response.Write ("Welcome User:" + strusername); Return Data } }CSS code:
. usertext { border:1px solid red; /* Control the wavy shape below the text box * /Background-image:url (.. /imge/userverify.gif); Background-repeat:repeat-x; Background-position:bottom;}Summarize:
The entire instance code. Can be divided into two parts: 1. Use jquery's Removeclass,addclass method to control the style of the text box.
2. Use the get method of jquery to pass the contents of the text box into the background for processing.
Source code Address: http://download.csdn.net/detail/suneqing/7424611
Jquery--jquery get method + Generic Handler handles text box contents
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
