Registration form verification

<!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;
   }

   // Verify user name
   function checkUserName () {
    var username = document.getElementById ('userName');
    var errname = document.getElementById ('nameErr');
    var pattern = / ^ \ w {3,} $ /; // Regular expression for username format: username must be at least three      digits
    if (username.value.length == 0) {
errname.innerHTML = "Username cannot be empty"
     errname.className = "error"
     return false;
    }
    if (! pattern.test (username.value)) {
     errname.innerHTML = "Username is out of specification"
     errname.className = "error"
     return false;
    } else {
     errname.innerHTML = "OK"
     errname.className = "success";
     return true ;
    }
   }

   // Verify password
   function checkPassword () {
    var userpasswd = document.getElementById ('userPasword');
    var errPasswd = document.getElementById ('passwordErr');
    var pattern = / ^ \ w {4,8} $ /; // The password must be 4-8 digits
    if (! Pattern.test (userpasswd.value)) {
     errPasswd.innerHTML = "The password is out of specification"
     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;
    }
   }

   // Verify phone number
   function checkPhone () {
    var userphone = document.getElementById ('userPhone');
    var phonrErr = document.getElementById ('phoneErr');
    var pattern = / ^ 1 [34578] \ d {9} $ / ; // Verify the regular expression of mobile phone number
    if (! Pattern.test (userphone.value)) {
     phonrErr.innerHTML = "Mobile phone number is out of specification"
     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>

Registration form verification

Guess you like