JQuery-用户名校验

最新推荐文章于 2019-06-15 15:12:55 发布

hxy87

最新推荐文章于 2019-06-15 15:12:55 发布

阅读量533

点赞数

分类专栏： JQuery 文章标签： function stylesheet 服务器 button xhtml javascript

本文链接：https://blog.csdn.net/hxy87/article/details/5860012

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

UserVerify.aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserVerify.aspx.cs" Inherits="Web.One.UserVerify" %>

<!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>
    <link href="../CSS/Css.css" rel="stylesheet" type="text/css" />
    <script src="../JavaScript/jquery-1.2.6-intellisense.js" type="text/javascript"></script>
   <script src="../JavaScript/JQuery.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    请输入用户名：<input type="text" id="userName" class="userText" />  <input type="button" value="校验" id="verifyButton"/>
    <div id="result">

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

CheckUser.aspx.cs代码:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using BLL;
using Model;

namespace Web.One
{
    public partial class CheckUser : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string name = Request.QueryString["userName"];
            if (name == "")
            {
                Response.Write("用户名不能为空");
            }
            //UserManager.getUserByName(name):根据用户名查询该用户是否存在,返回User对象,Name是User的属性
            else if (UserManager.getUserByName(name).Name != null)
            {
                Response.Write("用户["+ name+"]已经注册");
            }
            else
            {
                Response.Write("用户["+name+"]可以注册");
            }
        }
    }
}

JQuery.js代码:

*需要通过javascript代码来做两件事情
*1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到我们预留的div中，
这样用到就可以看到结果
*2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就应该取消，否则保留
**/

/*
*需要在页面装载完成是注册上这些工作
**/
/*
$(document ).ready(function(){
    //这里面的内容就是页面装载完成后需要执行的代码

    //需要找到button按钮,注册事件
    $("#verifyButton").click(function (){
        //1.获取文本框的内容
        var userName = $("#userName").val();   //val可以获取到文本框中的值
        //2.将这个内容发送给服务器端
        if(userName == ""){
            alert ("用户名不能为空");
        }else {

             $.get("CheckUser.aspx?userName="+decodeURI(decodeURI(userName)),null,function(response){
                 //3.接收服务器返回的数据,填充到div中
                 $("#result").html(response);
             });
        }

    });
    //需要找到文本框,注册事件
    $("#userName").keyup(function(){
        //获取当前文本框中的内容
        var value = $(this).val();
        if(value == ""){
            //让边框变成红色,并且带背景图
            $(this).addClass("userText");
        }else{
            //去掉边框和背景图
            $(this).removeClass("userText");
        }
    });

});

hxy87

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery-用户名校验

<br />UserVerify.aspx页面代码：<br /><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserVerify.aspx.cs" Inherits="Web.One.UserVerify" %><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans
复制链接

扫一扫