Verificação do formulário de inscrição

<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <título> </title>
  <tipo de estilo = "text / css">
   .pAll {
    width: 800px;
    família de fontes: '黑体';
    margem: 50px automático;
   }

   #titles {
    font-weight: bold;
    tamanho da fonte: 18 px;
    altura: 50px;
    altura da linha: 50 px;
    fundo: # FFF9F3;
    alinhamento de texto: centro;
    borda: 1px sólido #CCC;
   }

   #contents {
    margin-top: 20px;
    fundo: # FFF9F3;
    borda: 1px sólido #CCC;
   }

   # form-itemGroup {
    padding: 10px;


   # form-itemRótulo do grupo {
    display: bloco embutido;
    largura: 100px;
    altura: 32px;
    altura da linha: 32px;
    cor: # 666;
    alinhamento de texto: direita;
   }

   # form-itemGroup .userName {
    width: 200px;
    altura: 40px;
    altura da linha: 40 px;
    borda: 1px sólido #CCC;
   }

   # form-itemGroup .default {
    width: 200px;
    altura: 32px;
    altura da linha: 32px;
    cor: # 999;
   }

   # form-itemGroup .error {
    height: 32px;
    altura da linha: 32px;
    cor: # F00;
   }

   # form-itemGroup .success {
    height: 32px;
    altura da linha: 32px;
    cor: # 096;
   }

   .pBtn {
    margin-top: 20px;
    margem esquerda: 200 px;
    largura: 100px;
    altura: 32px;
    altura da linha: 32px;
    cor de fundo: # F93;
    margem inferior: 10 px;
    cor: #ffffff;
    intensidade da fonte: Negrito;
    borda: nenhuma;
   }
  </style>
  <script type = "text / javascript">
   função checkForm () {
    var nametip = checkUserName ();
    var passtip = checkPassword ();
    var conpasstip = ConfirmPassword ();
    var phonetip = checkPhone ();
    retornar datetip && passtip && conpasstip && phonetip;
   }

   // Verifique a
   função de nome de usuário   checkUserName () {
    var nome_do_usuário = document.getElementById ('nome_do_usuário');
    var errname = documento.getElementById ('nameErr');
    var padrão = / ^ \ w {3,} $ /; // Expressão regular para o formato do nome de usuário: o nome do usuário deve ter pelo menos três      dígitos
    se (nomedeusuario.valor.length == 0) {
errname.innerHTML = "O nome do usuário não pode estar vazio"
     errname.className = "erro"
     retornar falso;
    }
    if (! pattern.test (nomedeusuario.valor)) {
     errname.innerHTML = "Nome de usuário fora da especificação"
     errname.className = "erro"
     retornar falso;
    } else {
     errname.innerHTML = "OK"
     errname.className = "success";
     return true ;
    }
   }

   // Verifique a
   função da senha   checkPassword () {
    var userpasswd = document.getElementById ('userPasword');
    var errPasswd = document.getElementById ('passwordErr');
    var pattern = / ^ \ w {4,8} $ /; // senha para 4-8
    (! pattern.test (userpasswd.value)) {if
     errPasswd.innerHTML = "irregularidades senha"
     errPasswd.className = "error"
     return false;
    } else {
     errPasswd.innerHTML = "o OK"
     errPasswd .className = "success";
     return true;
    }
   }

   //
   função 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 = "上下密码 err"
     errConPasswd.className = "erro"
     retorne false;
    } else {
     errConPasswd.innerHTML = "OK"
     errConPasswd.className = "success";
     return true;
    }
   }

   // Verifique a
   função do número de telefone checkPhone () {
    var userphone = document.getElementById ('userPhone');
    var phonrErr = document.getElementById ('phoneErr');
    var pattern = / ^ 1 [34578] \ d {9} $ / ; // Verifique a expressão regular do número do celular
    se (! Pattern.test (userphone.value)) {
     phonrErr.innerHTML = "O número do celular está fora da especificação"
     phonrErr.className = "error"
     retorna false;
    } else {
     phonrErr.innerHTML = " OK "
     phonrErr.className =" success ";
     return true;
    }
   }
  </ script>
</ head>

<body>
   <p class = "pAll">
    <p id = "title"> 新用户注册 </p>
    <p id = "conteúdo">
     <h3> 基本信息 </h3>
     <hr width = "95% "color =" # f2f2f2 "/>
     <form action =" # "onSubmit =" retorne checkForm () ">
      <p id =" form-itemGroup ">
       <label para =" 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"> 请S 输入一遍密码 </span>
      </p>
      <p id = "form-itemGroup">
       <label for = "userPhone"> ：：: </label>
       <input type = "text" id = "userPhone" classe = "nome_do_usuário" onBlur = "checkPhone () "oninput =" checkPhone () ">
       <span class =" default "id =" phoneErr "> 输入位 11 位手机号码 </span>
      </p>
      <p>
       <tipo de botão = classe" enviar " = "pBtn"> 注册 </button>
      </p>
     </form>
    </p>
   </p>
</body>
</html>

Verificação do formulário de inscrição

Acho que você gosta