jquery使用者驗證

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、首先引入jquery-1.3.2.js
，將其放在js檔案夾下。

2、為文字框的邊框定義樣式檔案 style.css

,放在css檔案夾下，其內容如下：

.tbText
{
    /*控制邊框的是1px的實心紅色線*/
    border:1px solid red;
    background-image:url(../images/tb_underline.gif);
    background-repeat:repeat-x;
    background-position:bottom;
}

3、編寫js.js
檔案，放在js檔案夾下，內容如下：

$(document).ready(function() {
//頁面裝載完成後執行的操作
var userNode = $("#tbusername");
    //找到按鈕，並註冊事件
    $("#btnCheck").click(function() {
        //擷取文字框的內容
    var uname = userNode.val();
        //將擷取到的內容發送到伺服器端
        if (uname == "") {
            alert("使用者名稱不可為空！");
        }
        else {
            $.get("CheckUserName.aspx?username=" + uname, function(response) {
                //接收伺服器端返回的資料並顯示在頁面當中
                $("#msg").html(response);
            });

        }
    });
    //找到文字框，並註冊事件
    userNode.keyup(function() {
        //擷取文字框的內容
    var value = userNode.val();
        if (value == "") {
            //邊框變色
            userNode.addClass("tbText");
        }
        else {
            //邊框去色
            userNode.removeClass("tbText");
        }
    });
}
);

4、輸入頁面Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>jquery使用者驗證資訊</title>
    <script src="jquery/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="js/js.js" type="text/javascript"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>使用者名稱:</td>
                <td><input id="tbusername" type="text" class="tbText"/></td>
                <td><span id="msg"></span></td>
                <td><input id="btnCheck" type="button" value="驗證" /></td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>

5、請求處理頁面CheckUserName.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class CheckUserName : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string name = Request.QueryString["username"];

            //Response.ClearHeaders();
            //Response.Clear();
            //Response.ClearContent();
            //Response.ContentType = "text/plain";

            Response.Write(returnResult(name));
            Response.End();

        }
    }

public string returnResult(string name)
{

        //這裡為了示範，僅作簡單處理，這裡和資料庫進行互動處理，大家都懂的，根據需要進行處理即可
        string ret = string.Empty;
        if (name == "admin")
        {
            ret = "賬戶[" + name + "]可以註冊!";
        }
        else
        {
            ret = "賬戶[" + name + "]已經註冊!";
        }
        return ret;
    }
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery使用者驗證

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support