这是Java Script 脚本写的用户端注册验证的代码。

主要有以下功能:所有选项不为空,用户名长度为6-16位。年龄只能是数字,而且在18-30之间。身份证的确认。
电子邮箱必须是合法有效的。兴趣爱好和擅长的技术必须勾选一个!

好,大家看图吧

javascript用户注册代码 js用户注册验证代码_html



javascript用户注册代码 js用户注册验证代码_用户名_02



javascript用户注册代码 js用户注册验证代码_用户名_03



javascript用户注册代码 js用户注册验证代码_javascript用户注册代码_04



javascript用户注册代码 js用户注册验证代码_javascript用户注册代码_05

****************************************下面就是代码了!**********************

代码包括 js部分,还有网页主体部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE2 {font-size: 12px}
-->
</style>
</head>
<style>
.red
{ color:#FF0000;}
body
{ font:12px;}
</style>
<script language="javascript" type="text/javascript">
function Cname()
{
 var Name=document.getElementById("Tname").value;
 for(var i=0;i<Name.length;i++)
 {
  if(Name.charAt(i)>="0" && Name.charAt(i)<="9")
  {
   document.getElementById("Rname").style.color="red";
   document.getElementById("Rname").innerHTML=" 用户名不能有数字!";
   return false;
  }
 }
 if(Name.length=="")
 {
  document.getElementById("Rname").style.color="red";
  document.getElementById("Rname").innerHTML=" 请输入您的用户名!";
  return false;
 }
 else if(Name.length<6 || Name.length>16)
 {
  document.getElementById("Rname").style.color="red";
  document.getElementById("Rname").innerHTML=" 用户名只能由6-16位字符组成";
  return false;
 }
 else
 {
  document.getElementById("Rname").style.color="green";
  document.getElementById("Rname").innerHTML=" 该用户名可以使用";
  return true;
 }
}
function Cpwd1()
{
 var pwd1=document.getElementById("Tpwd1").value;
 if(pwd1.length=="")
 {
  document.getElementById("Rpwd1").style.color="red";
  document.getElementById("Rpwd1").innerHTML=" 请输入密码!";
  return false;
 }
 else if(pwd1.length<6 || pwd1.length>16)
 {
  document.getElementById("Rpwd1").style.color="red";
  document.getElementById("Rpwd1").innerHTML=" 密码只能由6-16位字符组成";
  return false;
 }
 else
 {
  document.getElementById("Rpwd1").style.color="green";
  document.getElementById("Rpwd1").innerHTML=" 密码通过";
  return true;
 }
}
function Cpwd2()
{
 var pwd1=document.getElementById("Tpwd1").value;
 var pwd2=document.getElementById("Tpwd2").value;
 if(pwd2!=pwd1)
 {
  document.getElementById("Rpwd2").style.color="red";
  document.getElementById("Rpwd2").innerHTML=" 请保持和上面密码的一致!";
  return false;
 }
 else
 {
  document.getElementById("Rpwd2").style.color="green";
  document.getElementById("Rpwd2").innerHTML=" 验证密码通过";
  return true;
 }
}
function Cid()
{
 var pid=document.getElementById("Tid").value;
 if(pid.length=="")
 {
  document.getElementById("Rid").style.color="red";
  document.getElementById("Rid").innerHTML=" 请输入您的身份证号!";
  return false;
 }
 else if(pid.length<0 || pid.length>18)
 {
  document.getElementById("Rid").style.color="red";
  document.getElementById("Rid").innerHTML=" 现在只支持第二代18位身份证";
  return false;
 }
 else
 {
  document.getElementById("Rid").style.color="green";
  document.getElementById("Rid").innerHTML="  确认";
  return true;
 }
}
function Cemail()
{
 var email=document.getElementById("Temail").value;
 if(email.length=="")
 {
  document.getElementById("Remail").style.color="red";
  document.getElementById("Remail").innerHTML=" 请输入您的电子邮箱地址!";
  return false;
 }
 else if(email.indexOf("@")<1 || email.indexOf(".")<2 || email.indexOf(".")<email.indexOf("@"))
 {
  document.getElementById("Remail").style.color="red";
  document.getElementById("Remail").innerHTML=" 请提供合法有效的电子邮箱地址";
  return false;
 }
 else
 {
  document.getElementById("Remail").style.color="green";
  document.getElementById("Remail").innerHTML="  格式合法";
  return true;
 }
}
function Ctel()
{
 var Tel=document.getElementById("Ttel").value;
 for(var i=0;i<Tel.length;i++)
 {
  if(Tel.charAt(i)<"0" || Tel.charAt(i)>"9")
  {
   document.getElementById("Rtel").style.color="red";
   document.getElementById("Rtel").innerHTML=" 手机号码只能是11位数字!";
   return false;
  }
 }
 if(Tel.length=="")
 {
  document.getElementById("Rtel").style.color="red";
  document.getElementById("Rtel").innerHTML=" 请输入您的手机号码";
  return false;
 }
 else if(Tel.length<0 || Tel.length>11)
 {
  document.getElementById("Rtel").style.color="red";
  document.getElementById("Rtel").innerHTML=" 手机号码只有11位,且只能是数字";
  return false;
 }
 else
 {
  document.getElementById("Rtel").style.color="green";
  document.getElementById("Rtel").innerHTML=" 格式合法";
  return true;
 }
}
var Team;  //变量Team,用于接收复选框 ‘全选’框上传的ID值
var IDname;  //用于接收复选框 各‘全选’项的子项的ID值
function CheckBox(Team,IDname) //函数(传参一,传参二)
{
 var ALT; //确定 alt属性的值
 var ID;  //获取变量Team 的值
 var IDname; //获取相应div的id名
 if(Team=="interest")
 {
  ALT="like";
  ID="interest";
  IDname="Rinter";
 }
 else if(Team=="technique")
 {
  ALT="tech";
  ID="technique";
  IDname="Rtech";
 }
 else
 {
  alert("传值出错!请联系程序员!");
 }
 var Call=document.getElementById(ID).checked;
 var bol=false;
 if(Call)
 {
  for(var i=0;i<document.Regform.elements.length;i++)
  {
   if(document.Regform.elements[i].type=="checkbox" && document.Regform.elements[i].alt==ALT)
   {
    document.Regform.elements[i].checked=true;
    document.getElementById(IDname).style.color="green";
    document.getElementById(IDname).innerHTML="√";
   }
  }
 }
 else
 {
  for(var i=0;i<document.Regform.elements.length;i++)
  {
   if(document.Regform.elements[i].type=="checkbox" && document.Regform.elements[i].alt==ALT)
   {
    document.Regform.elements[i].checked=false;
    document.getElementById(IDname).style.color="red";
    document.getElementById(IDname).innerHTML="× 请确认您选择了一项!";
   }
  }
 }
}
function Cinterest()
{
 var bol=false;
 for(var i=0;i<document.Regform.elements.length;i++)
 {
  if(document.Regform.elements[i].type=="checkbox" && document.Regform.elements[i].alt=="like" && document.Regform.elements[i].checked)
  {
   document.getElementById("Rinter").style.color="green";
   document.getElementById("Rinter").innerHTML="√ 通过";
   bol=true;
   return true;
  }
  else
  {
   document.getElementById("Rinter").style.color="red";
   document.getElementById("Rinter").innerHTML=" 您没有进行选择";
   bol=false;
  }
 }
 if(bol==false)
 { return false;}
}
function Ctechnique()
{
 var bol=false;
 for(var i=0;i<document.Regform.elements.length;i++)
 {
  if(document.Regform.elements[i].type=="checkbox" && document.Regform.elements[i].alt=="tech" && document.Regform.elements[i].checked)
  {
   document.getElementById("Rtech").style.color="green";
   document.getElementById("Rtech").innerHTML="√ 通过";
   bol=true;
   return true;
  }
  else
  {
   document.getElementById("Rtech").style.color="red";
   document.getElementById("Rtech").innerHTML=" 您没有进行选择";
   bol=false;
  }
 }
 if(bol==false)
 { return false;}
}function Result()
{
 if(Cname() && Cpwd1() && Cpwd2() && Cid() && Cemail() && Ctel() && Cinterest() && Ctechnique())
 {
  alert("您的资料已正确填写!请等待审查!");
 }
 else
 {
  alert("您的资料填写错误");
 }
}
</script>
<body><center>
<form name="Regform" id="Regform" action="#">
<table width="980" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" align="center"><span class="red">欢迎申请 北京中新企业管理学院 教师一职</span></td>
  </tr>
  <tr>
    <td width="240" align="right"><span class="red"> * </span>用户名:</td>
    <td width="349"><input type="text" name="Tname" id="Tname" onblur="Cname()" /></td>
    <td width="383" align="left"><div class="STYLE2" id="Rname">请输入您的昵称(6-16个字符),不能有数字。</div></td>
  </tr>
  <tr>
    <td align="right"><span class="red"> * </span>密码:</td>
    <td><input type="password" name="Tpwd1" id="Tpwd1" onblur="Cpwd1()" /></td>
    <td align="left"><div class="STYLE2" id="Rpwd1">请输入您的密码(6-10个字符),可以为任意字符。</div></td>
  </tr>
  <tr>
    <td align="right"><span class="red"> * </span>密码确认:</td>
    <td><input type="password" name="Tpwd2" id="Tpwd2" onblur="Cpwd2()" /></td>
    <td align="left"><div class="STYLE2" id="Rpwd2">重新输入刚才的密码,要求两密码保持一致。</div></td>
  </tr>
  <tr>
    <td align="right"><span class="red"> * </span>身份证号码:</td>
    <td><input type="text" name="Tid" id="Tid" onblur="Cid()" /></td>
    <td align="left"><div class="STYLE2" id="Rid">请输入您的身份证号码(18位第二代证件)!</div></td>
  </tr>
  <tr>
    <td align="right"><span class="red"> * </span>电子邮箱地址:</td>
    <td><input type="text" name="Temail" id="Temail" onblur="Cemail()" /></td>
    <td align="left"><div class="STYLE2" id="Remail">请提供合法有效的电子邮箱地址。</div></td>
  </tr>
  <tr>
    <td align="right"><span class="red"> * </span>手机:</td>
    <td><input type="text" name="Ttel" id="Ttel" onblur="Ctel()" /></td>
    <td align="left"><div class="STYLE2" id="Rtel">请输入您的手机号</div></td>
  </tr>
  <tr>
    <td align="right"><span class="red"> * </span>您的兴趣爱好:</td>
    <td>
     <input type="checkbox" name="interest" id="interest" onclick="CheckBox('interest','Rinter')" />全 选
        <input type="checkbox" alt="like" name="shopping" id="shopping" onclick="Cinterest()" />购 物
        <input type="checkbox" alt="like" name="sing" id="sing" onclick="Cinterest()" />唱 歌
        <input type="checkbox" alt="like" name="game" id="game" onclick="Cinterest()" />玩游戏
        <input type="checkbox" alt="like" name="book" id="book" onclick="Cinterest()" />看 书    </td>
    <td align="left"><div class="STYLE2" id="Rinter">请最少选择一项</div></td>
  </tr>
  <tr>
    <td align="right"><span class="red"> * </span>您擅长的技术:</td>
    <td>
     <input type="checkbox" name="technique" id="technique" onclick="CheckBox('technique','Rtech')" />全 选
        <input type="checkbox" alt="tech" name="JAVA" id="JAVA" onclick="Ctechnique()" />JAVA语言
        <input type="checkbox" alt="tech" name=".NET" id=".NET" onclick="Ctechnique()" />.NET语言
        <input type="checkbox" alt="tech" name="website" id="website" onclick="Ctechnique()" />网站制作开发
        <input type="checkbox" alt="tech" name="web" id="web" onclick="Ctechnique()" />网络    </td>
    <td align="left"><div class="STYLE2" id="Rtech">请最少选择一项</div></td>
  </tr>
  <tr>
    <td align="right"><span class="red"> * </span>您打算任教的班级:</td>
    <td>
      <select name="college" id="college" onchange="show()"></select><select name="clas" id="clas"><option>--请选择--</option></select>      
    <td>  </tr>
  <tr>
    <td colspan="3" align="center"><input type="button" name="stb" id="stb" value="提 交" onclick="Result()" /><input type="reset" name="res" id="res" value="重 填" /></td>
  </tr>
</table>
</form>
</center></body>
<script>
var col=new Array("--请选择--","计算机学院","艺术设计学院","商学院");
col["--请选择--"]=["--请选择学院--"];
col["计算机学院"]=["JAVA",".NET","网站开发","网络维护"];
col["艺术设计学院"]=["数字媒体","创意设计"];
col["商学院"]=["电子商务","创业班","投资理财"]; for(var i=0;i<col.length;i++)
 {
  var newOpt=new Option(col[i],col[i]);
  document.Regform.college.options.add(newOpt);
 }
var newCla;
var disCla;
function show()
{
 document.Regform.clas.length=0;  //将第二个sel选项里的内容清空
 newCla=document.Regform.college.value; //获取第一个sel选项里的值
 //循环,写入。
 for(var i in col[newCla]) 
 {
  disCla=new Option(col[newCla][i],col[newCla][i]); //将变量赋一个新Option值
  document.Regform.clas.options.add(disCla);   //将获取到的Options值写入sel选项
 }
}</script>
</html>