[WEB异步].Net文本框内容验证 并实现异步处理

jquery的脚本代码（实现注册中的验证功能）{文件名:register.js}

        var txtName = { state: false, $ref: null };
        var txtPWD = { state: false, $ref: null };
        var txtSame = { state: false, $ref: null };
        var txtEmail = { state: false, $ref: null };

        var Rules = {
            reg_name: /^[a-zA-Z]{1}\w{2,16}$/,
            reg_pwd: /^[a-zA-Z0-9]{6,15}$/,
            reg_mail: /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
        }

        function Client_Load(name, pwd, same, email) {
            txtName.$ref = $(name);
            txtPWD.$ref = $(pwd);
            txtSame.$ref = $(same);
            txtEmail.$ref = $(email);

            txtName.$ref.blur(IsValidByName);
            txtPWD.$ref.blur(IsValidByPWD);
            txtSame.$ref.blur(IsValidByPWD);
            txtEmail.$ref.blur(IsValidByEmail);
        };

        function ShowInfo(obj, font) {
            var $tip = obj.$ref.next();
            $tip.html(font);
            if (obj.state)
                $tip.css({ color: 'green' });
            else
                $tip.css({ color: 'red' });
            $tip.html(font);
        }
        /**//*===================Common End==================*/
        
        function IsValidByName() {
            var val = $.trim(txtName.$ref.val());
            txtName.state = false;
            
            if (val == '') {
                ShowInfo(txtName, "Ⅹ 请输入用户名！");
            } else if (!Rules.reg_name.test(val)) {
                ShowInfo(txtName, "Ⅹ 字母开头{3~16}位！");
            } else {
                IsRepeatByName(val);
            }
        };
        
        function IsRepeatByName(val) {
            var client = { call: "IsRepeat", name: val };
            $.post('Handler.ashx', client,
                function(data) {
                    if (data == 'T') {
                        ShowInfo(txtName, "Ⅹ 用户名已注册！");
                    }
                    else {
                        txtName.state = true;
                        ShowInfo(txtName, "√ 用户名正确！");
                    }
            });
        };
        /**//*===================Name End==================*/

        function IsValidByPWD() {
            var val = $.trim(txtPWD.$ref.val());
            txtPWD.state = false;

            if (val == '') {
                ShowInfo(txtPWD, "Ⅹ 请输入密码！");
            }
            else if (!Rules.reg_pwd.test(val)) {
                ShowInfo(txtPWD, "Ⅹ 6~15位数字或字母！");
            }
            else {
                txtPWD.state = true;
                ShowInfo(txtPWD, "√ 密码正确！");
            }

            var same = txtSame.$ref.val();
            txtSame.state = false;
            if (same == '') {
                ShowInfo(txtSame, "Ⅹ 请重复输入密码！");
            }
            else if (val == same) {
                txtSame.state = true;
                ShowInfo(txtSame, "√ 密码一致！");
            }
            else {
                ShowInfo(txtSame, "Ⅹ 请保持密码一致！");
            } 
        }
        /**//*==================PWD End=================*/

        function IsValidByEmail() {
            var val = $.trim(txtEmail.$ref.val());
            txtEmail.state = false;

            if (val == '') {
                ShowInfo(txtEmail, "Ⅹ 请输入邮箱！");
            }
            else if (Rules.reg_mail.test(val)) {
                txtEmail.state = true;
                ShowInfo(txtEmail, "√ 该邮箱正确！");
            }
            else {
                ShowInfo(txtEmail, "Ⅹ 该邮箱不存在！");
            }
        }
        /**//*================Email End================*/

        function IsValidBySubmit() {
            if (!txtName.state) {
                IsValidByName();
                return false;
            }
            if (!txtPWD.state) {
                IsValidByPWD();
                return false;
            }
            if (!txtSame.state) {
                IsValidByPWD();
                return false;
            }
            if (!txtEmail.state) {
                IsValidByEmail();
                return false;
            }
            return true;
        }

        /**//*================Submit End================*/

Css代码{文件名：register.css}

  *{}{margin:0; padding:0}
        body{}{font-family:simsun,Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:12px;}
        ul{}{list-style:none;}
        
        div{}{margin:20px auto 0 auto; width:300px;}
        ul li{}{line-height:1.5; height:25px;}
        ul li p{}{width:60px; float:left;}
        ul li span{}{ padding-left:6px;}
        ul li input{}{float:left; width:100px;}
        ul li .button{}{ margin-left:80px;}

Ashx代码{文件名：Handler.ashx}

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string call = context.Request.Form["call"];
        string returnValue = string.Empty;
        switch (call)
        {
            case "IsRepeat":
                returnValue = IsRepeat(context); break;

        }
        context.Response.Write(returnValue);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

    public string IsRepeat(HttpContext context)
    {
        return "F"; 
    }

}

Html代码

---

<head runat="server">
    <title>异步访问</title>
    <link rel="Stylesheet" type="text/css" href="register.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul>
            <li><p>用户名：</p><asp:TextBox ID="txtName" runat="server" MaxLength="16"></asp:TextBox><span></span></li>
            <li><p>密码：</p><asp:TextBox ID="txtPWD" TextMode="Password" runat="server" MaxLength="25"></asp:TextBox><span></span></li>
            <li><p>确认密码：</p><asp:TextBox ID="txtSame" TextMode="Password" runat="server" MaxLength="25"></asp:TextBox><span></span></li>
            <li><p>邮箱：</p><asp:TextBox ID="txtEmail" runat="server" MaxLength="60"></asp:TextBox><span></span></li>
            <li><asp:Button ID="btnSubmit" runat="server"
                    OnClientClick="return IsValidBySubmit()" CssClass="button" Text="提交"
                    onclick="btnSubmit_Click" /></li>
        </ul>
    </div>
    </form>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="register.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            Client_Load('#<%=txtName.ClientID%>', '#<%=txtPWD.ClientID%>', '#<%=txtSame.ClientID%>', '#<%=txtEmail.ClientID%>');
        });
    </script>
</body>
</html>

---

最终显示效果如下：