您现在的位置： 365建站网 > 365学习 > .Net文本框内容验证并实现异步处理

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

文章来源：365jz.com 点击数：563 更新时间：2009-10-07 10:50 参与评论

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>

最终显示效果如下：

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (563人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

大家感兴趣的内容

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

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询

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

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询

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