標籤：div osi gb2312 data- xtu 控制 執行個體代碼 javascrip var
網上常常看到這種互動方式，當去一個網站注冊username的時候，假設文字框內沒有輸入資料，或者資料輸入的內容格式不正確。就會將文字框變成紅色來提示你輸入的內容有誤。
自己將這個文字框驗證的方式改變了一下，並用到了get方法進行資料處理：1.點擊提交button時假設文字框為空白，文字框就會變成紅色邊框。2.當再次輸入時文字框紅色邊框消失。輸入後點擊提交。
3.利用jquery的get方法調用後台一般處理常式，處理前台的資料，處理後將值返回到前台。
代碼：
html代碼：
<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> 請輸入username： <input id="txtUserName" type="text"/><input id="btnOk" type="button" value="提交" /> </div> <div id="result"> </div> </form></body>
js代碼：注冊了兩個事件1.提交button單擊事件。
2.文字框keyup事件。
$(document).ready(function () { //找到button按鈕，注冊事件 $('#btnOk').click(function () { //找到txtUserName文字框 var txtUser = $("#txtUserName"); //擷取文字框內容 var userName = txtUser.val(); //將這個內容發給server if (userName.trim() == "") { //推斷文字框內容是否為空白 $("#txtUserName").addClass("usertext")//向文字框中加入class，改變文字框樣式 } else { //利用get方法調用服務端 $.get("HtmlPage1.ashx", { username: userName }, function (data) { //接受server的返回的資料將資料返回到div中 $("#result").html(data); }); } }); //找到txtUserName文字框。注冊事件 $('#txtUserName').keyup(function () { //擷取當前文字框中內容 var value = $(this).val(); if (value!="") { //去除文字框class。邊框紅色樣式消失 $(this).removeClass("usertext"); } });});
一般處理常式代碼：
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string strUserName = context.Request.QueryString["username"]; //擷取前台的username if (strUserName == "yq") { context.Response.Write("該使用者以存在"); //返回資料 } else { context.Response.Write("歡迎使用者：" + strUserName); //返回資料 } }
css代碼：
.usertext { border:1px solid red; /*控制文字框以下的波浪形*/ background-image:url(../imge/userVerify.gif); background-repeat:repeat-x; background-position:bottom;}
總結：
整個執行個體代碼中。能夠分為兩部分：1.利用 jQuery的removeClass，addClass方法去控制文字框的樣式。
2.利用jQuery的get方法將文字框中的內容，傳入後台進行處理。
原始碼地址：http://download.csdn.net/detail/suneqing/7424611
jQuery—— jQuery get方法+一般處理常式處理文字框內容
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
