天天看點

使用jQuery實作無重新整理效果驗證使用者名

操作:頁面(CheckName.aspx)輸入使用者名---->點選Check按鈕---->經由背景驗證(Check.aspx.cs)---->傳回驗證資訊

CheckName.aspx頁面代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckName.aspx.cs" Inherits="JSTest.CheckName" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            var userNameVal = $("#txtUserName");
            $("#btnCheckUserName").click(function(){
                var userName = userNameVal.val();
                if(userName==""){
                alert("使用者名不允許為空!");
            }else{
                $("#img").show();
                $.get("Check.aspx?userName="+userName,null,function(response){
                    $("#msg").html(response);
                    $("#img").hide();
                }); 
            }
        });
        userNameVal.keyup(function(){
            var value = userNameVal.val();
            $("#msg").html(" ");
            if(value==""){
                userNameVal.addClass("userText");
            }else{
                $(this).removeClass("userText");
            }    
        });   
});
    </script>
    <style type="text/css">
        .userText{
	        border:1px solid red;
	    }
    </style>
</head>
<body>
<form id="form1" runat="server">
    <table >
        <tr>
            <th>标題</th>
            <th>内容</th>
            <th>按鈕</th>
        </tr>
        <tr>
            <td><label for="txtUserName">使用者名</label></td>
            <td><input id="txtUserName" type="text" class="userText" /></td>
            <td><input id="btnCheckUserName" type="button" value="Check" /></td>
        </tr>
    </table>
    <div id="msg"></div>
    <div id="img" style="display:none"><img title="" alt="" src="img/ggg.gif" /></div>
</form>
</body>
</html>
           

Check.aspx.cs代碼

protected void Page_Load(object sender, EventArgs e)
        {
            string userName = Request.QueryString["userName"].ToString();
            if (userName == "綠樹臨風之丘")
            {
                Thread.Sleep(3000);//延遲一下
                Response.Write("使用者名已存在!");
            }
            else
            {
                Thread.Sleep(3000);
                Response.Write("此使用者名還未被注冊!");
            }
        }
           

繼續閱讀