AJAX+JavaScript无刷新检查用户名是否可用2009-04-20 16:26 JavaScript 和 Ajax 代码
<script language="javascript" type="text/javascript">
var xmlHttp = null;
function createXMLHttp()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function checka()
{
createXMLHttp();
var txtName=document.getElementById("txt_name"); // 获取输入用户名控件
var labName=document.getElementById("lab_name"); // 显示提示信息的控件
// 判断用户名格式和长度(只能是数字和字母组合)
// 错误情况一
if(!txtName.value.match(/^[a-zA-Z0-9]+$/) && txtName.value.length < 5 || txtName.value.length >16)
{
labName.style.color="#cc0000";
labName.value="请输入6-12位用户名，只能由数字字母组合。";
return false;
}else
// 正确
if(txtName.value.length > 5 && txtName.value.length <17 && txtName.value.match(/^[a-zA-Z0-9]+$/))
{
labName.style.color="#0000ff";
var url = "CheckName.aspx?userName="+txtName.value;
xmlHttp.open("post",url,true);
xmlHttp.onreadystatechange = sub;
xmlHttp.send(null);
}
// 错误情况二
else
{
labName.style.color="#cc0000";
labName.value="请输入6-12位用户名，只能由数字字母组合。";
return false;
}
}
function sub()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
document.getElementById("lab_name").value=xmlHttp.responseText;
}
}
}
</script>
HTML 页面控件以及方法调用
// onfocus 获取到光标事件 onblur 光标离开时候事件
<asp:TextBox ID="txt_name" runat="server" CssClass="t_txt" οnfοcus="checkName();" οnblur="checka();"></asp:TextBox>
// 我用的 TextBox ，兼容 IE 和 Firefox 样式
<asp:TextBox ID="lab_name" runat="server" Width="300px" style="border-top-style:none; border-width:0px; border-left-style:none; border-bottom-style:none; border-right-style:none;" ReadOnly="true"></asp:TextBox>
新建一张页面具体数据操作
SQL 连接以及语句略……
新页面 方法
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (CheckNames(Request.QueryString["userName"]) == true)
{
Response.Write("对不起，该用户名已被占用！");
}
else
{
Response.Write("恭喜,该用户名可以使用！");
}
}
}
private bool CheckNames(string userName)
{
// 创建一个数据集
DataSet ds = new DataSet();
// 实例化模型层
ZYB_UserLogin uiModel = new ZYB_UserLogin();
// 封装数据
uiModel.UNL_UserLoginName = userName;
// 实例化业务层
UserLoginBLL uiBll = new UserLoginBLL();
try
{
// 调用业务层的检查用户名方法
ds = uiBll.SelectNameCheck(uiModel);
// 判断是否有数据
if (ds.Tables[0].Rows.Count < 1)
{
// 没有代表可用
return false;
}
else
{
// 不可用
return true;
}
}
catch (Exception ex)
{
// 抛出异常
throw ex;
}
}
