.Net文本框内容验证 并实现异步处理
文章来源:365jz.com 点击数:
575 更新时间: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>
最终显示效果如下:
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛
------分隔线----------------------------