利用js和ajax及时检验用户注册填写信息是否正确

Ethan的博客 2011-05-21

展开全文

利用js和ajax及时检验用户注册填写信息是否正确

2011年03月25日星期五 15:40

文本框是否为空，邮箱格式是否正确，密码格式是否正确，文本框是否为整数，用户名是否符合格式，用户名是否被注册，当一些文本框没有填写资料，就不能提交等效果。
效果图界面：

代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
// JavaScript Document
var $=function(tagName)
{
return document.getElementById(tagName);
}
//邮箱检测------------------------------------------------------------------------------4
function check_idea15(s)
{
var reEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var b_email=reEmail.test(s);
if(b_email)
{
   $("span_15").innerHTML="<img src='images/yesok.gif'>";
}
else
{
   $("span_15").innerHTML="<img src='images/yesno.gif'> 邮箱不可用";
}
}
//整数检测------------------------------------------------------------------------------4
function check_AboutSequence(s)
{
var reNum=/^[0-9]{1,20}$/;
var b_Num=reNum.test(s);
if(b_Num)
{
   $("span_Sequence").innerHTML="<img src='images/yesok.gif'>";
   flag1[1]=1;
}
else
{
   $("span_Sequence").innerHTML="<img src='images/yesno.gif'> 请填写整数";
   flag1[1]=0;
}
check_data1();
}
var flag8=[0,0,0];
function check_ProductName(s)
{
if(s=="")
{
   $("span_ProductName").innerHTML="<img src='images/yesno.gif'> 请输入产品名称";
   flag8[0]=0;
}
else
{
   $("span_ProductName").innerHTML="<img src='images/yesok.gif'>";
   flag8[0]=1;
}
check_data8();
}

/* ======ajax.js 检测是否被注册过================BEGIN*/
// JavaScript Document
//--------------------------------------------------------------------
function checkUserName(regid){
var xmlhttp;
try{
   xmlhttp=new XMLHttpRequest();
   }
catch(e){
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){
   if (xmlhttp.status==200){
    var data=xmlhttp.responseText;
    id_result(data);
    }
   else{
    $("span_UserName").innerHTML="用户名检测失败,请联系管理员";
    }
   }
else{
   $("span_UserName").innerHTML="正在进行用户名校验...";
   }
}
xmlhttp.open("post", "Check_UserName.asp", true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("regid="+escape(regid));
}
function id_result(data){
var resultbox=$("span_UserName");
if(data==1){
   resultbox.innerHTML="<img src='images/yesok.gif'/> 用户名可用";
   flag4[0]=1;
   check_data4();
   }
else{
   resultbox.innerHTML="<img src='images/yesno.gif'/> 该用户名已经被注册";
   flag4[0]=0;
   check_data4();
}
}
/* ======ajax 检测是否被注册过================END*/
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>利用js和ajax及时检验填写信息是否正确。</title>
</head>
<body>
<form method='post' action='?action=add'>
<div id='frame_Toolbar' class='toolbarBg'> <a href='javascript:self.history.back();' class='icoBtn_ct'><span class='btnIco btnBack'></span><span class='btnTxt'>返回</span></a> <a href='javascript:self.location.reload();' class='icoBtn_ct'><span class='btnIco btnReload'></span><span class='btnTxt'>刷新</span></a><span class='split ftSplit' ></span>
    <div class='pageInfo right light_gray'></div>
</div>
<table class='cTable_2 table'>
    <tr>
      <td class="tRight">公司邮箱：</td>
      <td><input name="idea_15" type="text" id="idea_15" size="40" value="<%=idea_15%>" onBlur="check_idea15(this.value);">
        <span id="span_15">公司邮箱网页底部使用</span></td>
    </tr>
    <tr>
      <td class='tRight'>显示顺序：</td>
      <td><input name='Sequence' type='text' size='10' onBlur='check_AboutSequence(this.value);'>
        <span id='span_Sequence'>填写显示顺序(为整数)</span></td>
    </tr>
    <tr>
    <tr>
      <td class='tRight'>产品名称：</td>
      <td><input name='ProductName' type='text' id='ProductName' style='width:250px;' onBlur='check_ProductName(this.value);'/>
        <input name='IsShow' type='checkbox' id='IsShow' value='checkbox' checked='checked' />
        发布 <span id='span_ProductName'>请填写产品名称</span></td>
    </tr>

    <tr>
      <td class='tRight'>产品编号：</td>
      <td><input name='ProductID' type='text' id='ProductID' style='width:250px;' onBlur='check_ProductID(this.value);'/>
        <span id='span_ProductID'>请填写产品编号</span></td>
    </tr>
    <tr>
      <td class='tRight'>产品价格：</td>
      <td><input name='Price' type='text' id='Price' style='width:250px;' onBlur='check_Price(this.value);'/>
        <span id='span_Price'>请填写产品价格</span></td>
    </tr>
    <tr>
      <td class='tRight'>用户名：</td>
      <td><input name='UserName' type='text' id='UserName' size='30' onBlur='check_UserName(this.value);'/>
        <input name='Working' type='checkbox' id='Working' value='checkbox' checked>
        有效 <span id='span_UserName'>请填写用户名(字母或数字)</span></td>
    </tr>
    <tr>
      <td class='tRight'>密   码：</td>
      <td><input name='Password' type='password' id='Password' size='40' onBlur='check_Password();'/>
        <span id='span_Password'>请填写密码(不能含中文且大于6个字符)</span></td>
    </tr>
    <tr>
      <td class='tRight'>确认密码：</td>
      <td><input name='vPassword' type='password' id='vPassword' size='40' onBlur='check_vPassword();'/>
        <span id='span_vPassword'>请填写确认密码</span></td>
    </tr>
</table>
<div id='cEndToolbar' class='toolbarBg'>
    <div class='caButCase'>
      <input type='submit' name='Btn_OK' id='Btn_OK' disabled='disabled' value='确认添加' class='button'>

      <input type='reset' name='Submit2' value='清空重填' class='button'>
    </div>
</div>
</form>
</body>
</html>
Check_UserName.asp页面的代码如下：

<%
'conn.asp 这个页面是连接数据库的代码
regid=trim(request.Form("regid"))
sql="select top 1 ID from Idea_Admin where UserName='"&regid&"'"
set rs=idea.exec(sql,1)
if rs.eof and rs.bof then
   response.Write(1)
else
   response.Write(0)
end if
rs.close
set rs=nothing
%>
images/yesok.gif 图片：
images/yesno.gif 图片：
images/bad.gif   图片：
images/comm.gif 图片：
images/good.gif 图片：