Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Registrierungsseite für die reguläre jQuery-Verifizierung

Ausführliche Erläuterung der Registrierungsseite für die reguläre jQuery-Verifizierung

小云云Original: 2018-01-10 09:40:403293Durchsuche

In diesem Artikel wird hauptsächlich die Funktion der regulären Verifizierungsregistrierungsseite von jQuery vorgestellt, die Fähigkeiten zur regelmäßigen Verifizierung von Benutzernamen, Passwörtern, E-Mail-Adressen, Mobiltelefonnummern usw. umfasst. Freunde, die sie benötigen, können darauf verweisen .

Das Beispiel in diesem Artikel beschreibt die Funktion der Registrierungsseite für die reguläre jQuery-Verifizierung. Teilen Sie es wie folgt als Referenz mit allen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正则验证注册页面</title>
  <style type="text/css">
    .red{
      color:#cc0000;
      font-weight:bold;
    }
  </style>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script language="JavaScript">
    function $(elementId){
      return document.getElementById(elementId).value;
    }
    function pId(elementId){
      return document.getElementById(elementId);
    }
//    用户名验证
    function checkUser(){
      var user = $("user");
      var userId = pId("user_prompt");
      userId.innerHTML="";
      var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
      if(reg.test(user)==false){
          userId.innerHTML="用户名不正确";
        return false;
      }
      return true;
    }
//    password check
    function checkPwd(){
      var pwd = $("pwd");
      var pwdId = pId("pwd_prompt");
       pwdId.innerHTML="";
      var reg = /^[a-zA-Z0-9]{4,10}$/;
      if(reg.test(pwd)==false){
        pwdId.innerHTML = "密码不能含有非法字符，长度在4-10之间";
        return false;
      }
      return true;
    }
     function checkRepwd(){
       var repwd = $("repwd");
       var pwd = $("pwd");
       var repwdId = pId("repwd_prompt");
        repwdId.innerHTML=""
       if(pwd!=repwd){
         repwdId.innerHTML="两次密码不一致";
         return false;
       }
       return true;
     }
//   邮箱验证
    function checkEmail(){
      var email = $("email");
      var email_prompt = pId("email_prompt");
      email_prompt.innerHTML="";
      var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
       if(reg.test(email)==false){
         email_prompt.innerHTML="Email格式不对，请输入正确email";
         return false;
       }
      return true;
    }
//      手机号验证
    function checkMobile() {
      var mobile = $("mobile");
      var mobileId = pId("mobile_prompt");
      mobileId.innerHTML="";
      var reMobile = /^1\d{10}$/;
       if (reMobile.test(mobile)==false){
         mobileId.innerHTML="手机号输入有误";
         return false;
       }
      return true;
    }
//    生日验证
    function checkBirth(){
      var birth = $("birth");
      var birthId = pId("birth_prompt");
      birthId.innerHTML="";
      var reg = /^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
      if(reg.test(birth)==false){
        birthId.innerHTML="生日格式不对";
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
<table class="main" border="0" callpadding="0" cellspacing="0">
  <tr>
    <td><img src="images/logo.jpg" alt="logo"><img src="images/banner.jpg" alt="banner"></td>
  </tr>
  <tr>
    <td class="hr_1">新用户注册</td>
  </tr>
  <tr>
    <td style="height: 10px;"></td>
  </tr>
    <form action="" method="post" name="myform">
  <tr>
     <td><table>
       <tr>
         <td class="left">用户名：</td>
         <td class="center"><input type="text" id="user" class="in" onblur="checkUser()"></td>
         <td><p id="user_prompt">用户名由英文字母和数字组成-4到16位字符，以字母开头</p></td>
       </tr>
       <tr>
         <td class="left">密码：</td>
         <td class="center"><input type="password" id="pwd" class="in" onblur="checkPwd()"></td>
         <td><p id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</p></td>
       </tr>
       <tr>
         <td class="left">确认密码：</td>
         <td class="center"><input type="password" id="repwd" class="in" onblur="checkRepwd()"></td>
         <td><p id="repwd_prompt"></p></td>
       </tr>
       <tr>
         <td class="left">电子邮箱：</td>
         <td class="center"><input type="text" id="email" class="in" onblur="checkEmail()"></td>
         <td><p id="email_prompt"></p></td>
       </tr>
       <tr>
         <td class="left">手机号码：</td>
         <td class="center"><input type="text" id="mobile" class="in" onblur="checkMobile()"></td>
         <td><p id="mobile_prompt"></p></td>
       </tr>
       <tr>
         <td class="left">生日：</td>
         <td class="center"><input type="text " id="birth" class="in" onblur="checkBirth()"></td>
         <td><p id="birth_prompt"></p></td>
       </tr>
       <tr>
         <td class="left"> </td>
         <td class="center"><input name="" type="image" src="images/register.jpg" /></td>
         <td> </td>
       </tr>
     </table>
     </td>
  </tr>
  </form>
</table>
</body>
</html>

Verwandte Empfehlungen:

Gemeinsame Javascript-Funktionen und regelmäßige Überprüfung Ausdrücke Codezusammenfassung

php Verwenden Sie reguläre Ausdrücke, um E-Mail-Adressen zu überprüfen

HTML-Beispielanzeige mithilfe eines Formulars zur Überprüfung regulärer Ausdrücke

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Registrierungsseite für die reguläre jQuery-Verifizierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript jquery html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery bindet einfach eine einzelne Ereignisinstanz zur FreigabeNächster Artikel：jQuery bindet einfach eine einzelne Ereignisinstanz zur Freigabe

In Verbindung stehende Artikel

Mehr sehen