注册表单验证

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .pAll {
    width: 800px;
    font-family: '黑体';
    margin: 50px auto;
   }

   #titles {
    font-weight: bold;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    background: #FFF9F3;
    text-align: center;
    border: 1px solid #CCC;
   }

   #contents {
    margin-top: 20px;
    background: #FFF9F3;
    border: 1px solid #CCC;
   }

   #form-itemGroup {
    padding: 10px;
   }

   #form-itemGroup label {
    display: inline-block;
    width: 100px;
    height: 32px;
    line-height: 32px;
    color: #666;
    text-align: right;
   }

   #form-itemGroup .userName {
    width: 200px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #CCC;
   }

   #form-itemGroup .default {
    width: 200px;
    height: 32px;
    line-height: 32px;
    color: #999;
   }

   #form-itemGroup .error {
    height: 32px;
    line-height: 32px;
    color: #F00;
   }

   #form-itemGroup .success {
    height: 32px;
    line-height: 32px;
    color: #096;
   }

   .pBtn {
    margin-top: 20px;
    margin-left: 200px;
    width: 100px;
    height: 32px;
    line-height: 32px;
    background-color: #F93;
    margin-bottom: 10px;
    color: #ffffff;
    font-weight: bold;
    border: none;
   }
  </style>
  <script type="text/javascript">
   function checkForm() {
    var nametip = checkUserName();
    var passtip = checkPassword();
    var conpasstip = ConfirmPassword();
    var phonetip = checkPhone();
    return nametip && passtip && conpasstip && phonetip;
   }

   //验证用户名
   function checkUserName() {
    var username = document.getElementById('userName');
    var errname = document.getElementById('nameErr');
    var pattern = /^\w{3,}$/; //用户名格式正则表达式：用户名要至少三位
    if(username.value.length == 0) {
     errname.innerHTML = "用户名不能为空"
     errname.className = "error"
     return false;
    }
    if(!pattern.test(username.value)) {
     errname.innerHTML = "用户名不合规范"
     errname.className = "error"
     return false;
    } else {
     errname.innerHTML = "OK"
     errname.className = "success";
     return true;
    }
   }

   //验证密码
   function checkPassword() {
    var userpasswd = document.getElementById('userPasword');
    var errPasswd = document.getElementById('passwordErr');
    var pattern = /^\w{4,8}$/; //密码要在4-8位
    if(!pattern.test(userpasswd.value)) {
     errPasswd.innerHTML = "密码不合规范"
     errPasswd.className = "error"
     return false;
    } else {
     errPasswd.innerHTML = "OK"
     errPasswd.className = "success";
     return true;
    }
   }

   //确认密码
   function ConfirmPassword() {
    var userpasswd = document.getElementById('userPasword');
    var userConPassword = document.getElementById('userConfirmPasword');
    var errConPasswd = document.getElementById('conPasswordErr');
    if((userpasswd.value) != (userConPassword.value) || userConPassword.value.length == 0) {
     errConPasswd.innerHTML = "上下密码不一致"
     errConPasswd.className = "error"
     return false;
    } else {
     errConPasswd.innerHTML = "OK"
     errConPasswd.className = "success";
     return true;
    }
   }

   //验证手机号
   function checkPhone() {
    var userphone = document.getElementById('userPhone');
    var phonrErr = document.getElementById('phoneErr');
    var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式
    if(!pattern.test(userphone.value)) {
     phonrErr.innerHTML = "手机号码不合规范"
     phonrErr.className = "error"
     return false;
    } else {
     phonrErr.innerHTML = "OK"
     phonrErr.className = "success";
     return true;
    }
   }
  </script>
</head>

<body>
   <p class="pAll">
    <p id="titles">新用户注册</p>
    <p id="contents">
     <h3>基本信息</h3>
     <hr width="95%" color="#f2f2f2" />
     <form action="#" onSubmit="return checkForm()">
      <p id="form-itemGroup">
       <label for="userName">用户名：</label>
       <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()">
       <span class="default" id="nameErr">请输入至少3位的用户名</span>
      </p>
      <p id="form-itemGroup">
       <label for="userPasword">密码：</label>
       <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()">
       <span class="default" id="passwordErr">请输入4到8位的密码</span>
      </p>
      <p id="form-itemGroup">
       <label for="userConfirmPasword">确认密码：</label>
       <input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()">
       <span class="default" id="conPasswordErr">请再输入一遍密码</span>
      </p>
      <p id="form-itemGroup">
       <label for="userPhone">手机号码：</label>
       <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()">
       <span class="default" id="phoneErr">请输入11位手机号码</span>
      </p>
      <p>
       <button type="submit" class="pBtn">注册</button>
      </p>
     </form>
    </p>
   </p>
</body>
</html>

猜你喜欢