javaScript验证注册页面

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div id="divcontent">
<form id="registForm" name="registerForm" οnsubmit="registercheck()" action="register.action" method="post">
 <table width="850px" border="0" cellspacing="0">
  <tr>
   <td style="padding: 30px">
    <h1>新会员注册</h1>
    <table width="70%" border="0" cellspacing="2" class="upline">
     <tr>
      <td style="text-align: right; width: 20%">会员邮箱：</td>
      <td style="width: 40%">
       <input  type="text" class="textinput" name="account" οnblur="return check()"/>
       <span id="mail" ></span>
      </td>
      <td>
       <img src="../../material/images/check_use.gif" width="111"height="24" />
      </td>
     </tr>
     <tr>
      <td style="text-align: right">会员名：</td>
      <td>
       <input type="text" class="textinput" name="username" οnblur="return checkname()"/>
       <span id="user"></span>
      </td>
      <td>
       <img src="../../material/images/check_use.gif" width="111"height="24" />
      </td>
     </tr>
     <tr>
      <td style="text-align: right">密码：</td>
      <td>
       <input type="password" class="textinput" name="password" οnblur="return checkpassword()"/>
       <span id="pass"></span>
      </td>
      <td><font color="#999999">密码设置至少6位，请区分大小写</font></td>
     </tr>
     <tr>
      <td style="text-align: right">重复密码：</td>
      <td>
       <input type="password" class="textinput" name="password1" οnblur="return checkpassword()"/>
       <span id="repass"></span>
      </td>
      <td>&nbsp;</td>
     </tr>
     <tr>
      <td style="text-align: right">性别：</td>
      <td colspan="2">&nbsp;&nbsp;
       <input type="radio" name="radiobutton" value="radiobutton" />
       男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="radio" name="radiobutton" value="radiobutton" />
       女
      </td>
     </tr>
     <tr>
      <td style="text-align: right">联系方式：</td>
      <td colspan="2"><input name="tel" type="text" class="textinput" /></td>
     </tr>
     <tr>
      <td style="text-align: right">发货地址：</td>
      <td colspan="2"><input name="addr" type="text" class="textinput"style="width: 350px" /></td>
     </tr>
     <tr>
      <td style="text-align: right">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     </tr>
    </table>

    <h1>密码保护信息 (以下信息用于取回密码以及处理其他帐户问题，请您慎重填写并牢记)</h1>
    <table width="70%" border="0" cellspacing="2" class="upline">
     <tr>
      <td width="16%" style="text-align: right; width: 20%">密码保护问题：</td>
      <td width="47%" style="width: 50%">
       <select name="pwdp" class="textinput"style="width: 230px; height: 20px">
        <option value="">- 选择一个问题 -</option>
        <option value="您的宠物的名字？">您的宠物的名字？</option>
        <option value="您就读的第一所学校的名称？">您就读的第一所学校的名称？</option>
        <option value="少年时代心目中的英雄是谁？">少年时代心目中的英雄是谁？</option>
        <option value="您最喜欢的休闲运动是什么？">您最喜欢的休闲运动是什么？</option>
        <option value="您最喜欢哪支运动队？">您最喜欢哪支运动队？</option>
        <option value="您最喜欢的运动员是谁？">您最喜欢的运动员是谁？</option>
        <option value="您的第一辆汽车或自行车是什么牌子的？">您的第一辆汽车或自行车是什么牌子的？</option>
       </select>
      </td>
      <td>&nbsp;</td>
     </tr>
     <tr>
      <td style="text-align: right">答案：</td>
      <td colspan="2">
       <input type="text" class="textinput" name="pwda" />
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <font color="#999999">不能少于4个字符，不区分大小写</font>
      </td>
     </tr>
     <tr>
      <td style="text-align: right">备用邮箱：</td>
      <td><input type="text" class="textinput" /></td>
      <td>&nbsp;</td>
     </tr>
     <tr>
      <td style="text-align: right">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     </tr>
    </table>

    <h1>注册校验</h1>
    <table width="80%" border="0" cellspacing="2" class="upline">
     <tr>
      <td style="text-align: right; width: 20%">输入校验码：</td>
      <td style="width: 50%"><input type="text" class="textinput" /></td>
      <td>&nbsp;</td>
     </tr>
     <tr>
      <td style="text-align: right">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     </tr>
    </table>

    <h1>服务条款</h1>
    <table width="70%" border="0" cellspacing="0">
     <tr>
      <td><textarea name="textarea" class="textarea"></textarea></td>
     </tr>
    </table>

    <table width="70%" border="0" cellspacing="0">
     <tr>
      <td style="padding-top: 20px; text-align: center">
       <input name="image" type="image" οnclick="return formsubmit()" src="../../material/images/signup.gif" width="195" height="40"/>
                        </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</form>
</div>

js页面 check.js

function check() {
 var reg = /^[0-9a-zA-Z_]{5,12}@(163|126|qq|yahoo|gmail|sina|hotmail|)\.(com|com\.cn|cn|la)$/;
 var account = document.registerForm.account;
 var mail = document.getElementById("mail");
 if (null == account.value || "" == account.value) {
  mail.innerHTML = "<font color = 'red'>不能为空</>";
  return false;
 } else {
  if (reg.test(account.value)) {
   mail.innerHTML = "";
   return true;
  } else {
   mail.innerHTML = "<font color = 'red'>格式不对</>";
   return false;
  }
 }
}
function checkname() {
 var username = document.registerForm.username;
 var user = document.getElementById("user");
 if (null == username.value || "" == username.value) {
  user.innerHTML = "<font color = 'red'>不能为空</>";
  return false;
 } else {
  user.innerHTML = "";
  return true;
 }
}
function checkpassword() {
 var reg1 = /^[0-9a-zA-Z_]{6,18}$/;
 var password = document.registerForm.password;
 var password1 = document.registerForm.password1;
 var pass = document.getElementById("pass");
 var repass = document.getElementById("repass");
 var flag = false;
 if (null == password.value || "" == password.value) {
  pass.innerHTML = "<font color ='red'>不能为空</font>";
  return false;
 } else {
  pass.innerHTML = "";
  flag = true;
 }
 if (flag) {
  if (reg1.test(password.value)) {
   pass.innerHTML = "<font color = 'blue'>正确";
   flag = true;
  } else {
   pass.innerHTML = "<font color = 'red'>输入格式不正确</>";
   flag = false;
   return flag;
  }
  if (flag) {
   if (password.value != password1.value) {
    repass.innerHTML = "<font color='red'>重复密码不同</font>";
    return false;
   } else {
    repass.innerHTML = "<font color='blue'>OK！</font>";
    return true;
   }
  }
 }
}

function checktel() {
 var tel = document.getElementById("tel");
 var contact = document.registerForm.contact;
 if (null == contact.value || "" == contact.value) {
  lianxi.innerHTML = "<font color = 'red'>不能为空</font>";
 } else {
  if (isNaN(contact.value)) {
   lianxi.innerHTML = "<font color = 'red'>格式不对</font>";
  } else {
   lianxi.innerHTML = "<font color = 'red'>Ok!</font>";
  }
 }
}
function check3() {
 var suiji = document.getElementById("suiji");
 var textinput = document.registerForm.textinput.value;
 if (suiji.value == textinput) {
  suiji.innerHTML = "<font color = 'red'>OK!</font>";
 } else {
  suiji.innerHTML = "<font color = 'red'>验证不对</font>";
 }
}

 

 

转载于:https://my.oschina.net/zichen/blog/103960