Jquery 动态检测用户名

来源:互联网 发布:淘宝倒计时插件在哪里 编辑:程序博客网 时间:2024/05/29 07:25

前台:

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

<!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></title>

    <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $("#spanValidate").css("color", "red").css("fontSize", "12px");
            $("#txtName").blur(function() {
                $(this).val($.trim($(this).val()));
                if ($.trim($(this).val()) == "") {
                    var img = $("<img  src='../imgs/correct.gif' />");
                    $("#spanValidate").html("<img  src='../imgs/disable.gif' />用户名不能为空");
                }
                else {

                    $.ajax({
                        url: "validation.aspx/CheckUserName",
                        type: "Post",
                        data: "{ 'name': '" + $.trim($(this).val()) + "' }",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(data) {
                            if (data.d == true) {
                                $("#spanValidate").css("color", "red").html("<img  src='../imgs/correct.gif' />");
                            }
                            else {
                                $("#spanValidate").css("color", "red").css("fontSize", "12px").html("<img  src='../imgs/disable.gif' />用户名已存在");
                            }
                        },
                        error: function(err) {
                            alert(err);
                        }

                    });
                }
            });

            $("#btnCheck").click(function() {
                var userName = $("#txtName").val();
                $.ajax({
                    url: "validation.aspx/CheckUserName",
                    type: "Post",
                    data: "{ 'name': '" + userName + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                        if (data.d == true) {
                            $("#spanValidate").css("color", "red").html("<img  src='../imgs/correct.gif' />");
                        }
                        else {
                            $("#spanValidate").css("color", "red").css("fontSize", "12px").html("<img  src='../imgs/disable.gif' />用户名已存在");
                        }
                    },
                    error: function(err) {
                        alert(err);
                    }

                });
            });
        });
       
       
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" runat="server" id="txtName" /><input type="button" id="btnCheck"
            value="检测用户名" /><br />
        <span id="spanValidate"></span>
    </div>
    </form>
</body>
</html>

 

 

后台:

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

public partial class validate_validation : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    public static bool CheckUserName(string name)
    {
        if (name == "lee")
        {
            return false;
        }
        return true;
    }
}