<!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> <title>使用jquery+ajax方式實現使用者註冊時，檢測使用者名稱是否存在</title> <style type="text/css"> /* 當使用者沒有輸入使用者名稱，設定text邊框為紅色，否則為預設樣式。 */ .UserText { border:1px solid red; } </style> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //給檢驗按鈕註冊事件 $('#Regist').click(function () { var userName = $('#UserName').val(); if ($.trim(userName) == "") { //使用者輸入不可為空或空格. alert("使用者名稱不可為空"); } else { //幕後處理資料驗證 $.get("jquery/UserRegist.aspx", { userName: userName }, function (data) { $('#divMsg').html(data); //接受伺服器處理返回資料，填充在div中 }); } }); //註冊文字框事件 $('#UserName').keyup(function () { var username = $(this).val();//擷取當前文字框內容 if ($.trim(username) == "") { $(this).addClass('UserText');//為空白時添加紅色邊框 } else { $(this).removeClass('UserText');//不為空白則移除 } }); }); </script></head><body>請輸入使用者名稱：<input type="text" id="UserName"/><input type="button" id="Regist" value="檢驗" /><div id="divMsg"></div></body></html>
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
