jQuery注册时验证输入是否合法

****************************aspx页面***********************************************

<%@ Page Language="C#" AutoEventWireup="true" Debug="true" CodeFile="Register.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">
<meta http-equiv="expires" content="0" />
    <title>注册</title>
        <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
        <link type="text/css" rel="Stylesheet" href="css/css1.css"><link />
    <script type="text/javascript">
        function checkUserId()
        {
            $.get("Default.aspx",SendingData(),callback);
        }

        function callback(data)
        {
            //alert(data);

            if($("#txtUserId").val()=="")
            {
                $("#result").html("");
                return;
            }

            if(data=="该帐号已被注册！")
            {
                $("#result").css({color: "red", background: "#cde6c7"});
                $("#result").html(data);
                $("#txtUserId").select();
                $("#txtUserId").focus();
            }
            else
            {
                $("#result").css({color: "green", background: "#cde6c7",width:"90%"});
                $("#result").html("<b>OK</b>");
            }

        }

        function SendingData()
        {
            var _userId,_dataType,_json,_number;

            _userId = $("#txtUserId").val();

            _dataType = "txtUserId";

            _json = {userId:_userId,dataType:_dataType};

            return _json;
        }

    </script>
    <script type="text/javascript">
        $(function(){
              $("#txtConfirmPwd").bind("blur",pwdblur);
              $("#txtPwd").bind("blur",pwd1);
        });

        var pwdblur = function(){
            if($("#txtPwd").val()!=""||$("#txtConfirmPwd").val()!="")
            {
                if($("#txtPwd").val()!=$("#txtConfirmPwd").val())
                {
                     $("#dvPwd").css({color: "red", background: "#cde6c7"});
                     $("#dvPwd").html("确认密码不正确！");
                }
                else
                {
                     $("#dvPwd").css({color: "green", background: "#cde6c7"});
                     $("#dvPwd").html("<b>OK</b>");
                }
            }
        };

        var pwd1 = function(){
            if($("#txtPwd").val()!="")
            {
                if($("#txtPwd").val().size < 6|| $("#txtPwd").val().size >12 )
                {
                    $("#dvPwd1").css({color: "red", background: "#cde6c7"});
                    $("#dvPwd1").html("密码位数不正确！");
                    $("#txtPwd").select();
                    $("#txtPwd").focus();

                }
                else
                {
                     $("#dvPwd1").css({color: "green", background: "#cde6c7"});
                     $("#dvPwd1").html("<b>OK</b>");
                }
            }

        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align:center">
            <table>
                <tr>
                    <td>帐号：</td>
                    <td>
                        <input id="txtUserId" runat="server" onblur="checkUserId()" type="text" />
                    </td>
                    <td><div id="result"></div></td>
                </tr>
                  <tr>
                    <td>密码：</td>
                    <td>
                        <input id="txtPwd" runat="server" type="password" />
                    </td>
                    <td><div id="dvPwd1">(6~12位数字或字母)</div></td>
                </tr>
                <tr>
                    <td>
                        确认密码：</td>
                    <td>
                        <input id="txtConfirmPwd" runat="server" type="password" /></td>
                    <td>
                        <div id="dvPwd"></div>
                        </td>
                </tr>
                  <tr>
                    <td>E-mail：</td>
                    <td>
                        <input id="txtEmail" runat="server" type="text" /></td>
                        <td></td>
                </tr>

                 <tr>
                    <td>年龄：</td>
                    <td>
                        <input id="txtAge" runat="server" type="text" /></td>
                        <td></td>
                </tr>
                <tr>
                   <td>性别：</td>
                    <td>
                        <input id="rdMale" runat="server" checked="true" type="radio" name="sex" />男   
                        <input id="rdFemale" runat="server" type="radio" name="sex"/>女
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>电话：</td>
                    <td>
                        <input id="txtTel" runat="server" type="text" /></td>
                        <td></td>
                </tr>
                <tr>
                    <td>

                        <asp:Button ID="btnRegister" runat="server" Text="注册" OnClick="btnRegister_Click" /></td>
                    <td>
                        <input id="btnReset" runat="server" type="button" value="重置" /></td>
                    <td></td>
                </tr>
            </table>
        </div>

    </form>
    <script type="text/javascript">
    $("input").bind("mouseenter mouseleave", function(e){
    $(this).toggleClass("over");
    });
</script>
</body>
</html>
**************************cs后台处理文件*******************************

protected void Page_Load(object sender, EventArgs e)
    {

        if (Request["dataType"].ToString() == "txtUserId")
        {
            if (UserIsExist(Request["userId"].ToString()))
            {
                //这里要注意，如果没有Response.Clear();和Response.End();，不仅返回“该帐号已被注册！”，也会返回页面文件。
                Response.Clear();
                Response.Write("该帐号已被注册！");
                Response.End();

            }
            else
            {
                Response.Clear();
                Response.Write("该帐号可用！");
                Response.End();
            }
        }
        else
        {
            if (Request["dataType"].ToString() == "htm")
            {
                Response.Write("vincent");
            }
        }
    }

posted on 2010-09-25 17:05 赖顺生阅读(2702) 评论(0) 收藏举报

刷新页面返回顶部

将最美的计算机软件奉献给社会

公告