使用jQuery实现无刷新效果验证用户名

最新推荐文章于 2024-07-20 23:54:17 发布

DruidQ

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量507

点赞数 1

分类专栏： Article-Js 文章标签： jquery function javascript border xhtml server

本文链接：https://blog.csdn.net/q93161/article/details/8064561

版权

Article-Js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

操作：页面(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 border="1">
        <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("此用户名还未被注册！");
            }
        }

DruidQ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery实现无刷新效果验证用户名

操作：页面(CheckName.aspx)输入用户名---->点击Check按钮---->经由后台验证(Check.aspx.cs)---->返回验证信息CheckName.aspx页面代码 Untitled Page $(document).ready(function(){ var use
复制链接

扫一扫