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

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

文章来源:365jz.com     点击数:483    更新时间: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>

最终显示效果如下:

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


发表评论 (483人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------