bootstrap4註冊頁面

佬zz發表於2024-07-20
boot
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>register</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  </head>
  <body>
    <div class="page login-page">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6">
              <div class="info d-flex align-items-center">
                <div class="content">
                  <div class="logo">
                    <h1>歡迎註冊</h1>
                  </div>
                  <p>XXXX管理系統</p>
                </div>
              </div>
            </div>
            <!-- Form Panel    -->
            <div class="col-lg-6 bg-white">
              <div class="form d-flex align-items-center">
                <div class="content">
                    <div class="form-group">
                      <input id="register-username" class="input-material" type="text" name="registerUsername" placeholder="請輸入使用者名稱/姓名" >
                               <div class="invalid-feedback">
                                    使用者名稱必須在2~10位之間
                               </div>
                    </div>
                    <div class="form-group">
                      <input id="register-password" class="input-material" type="password" name="registerPassword" placeholder="請輸入密碼"   >
                        <div class="invalid-feedback">
                                    密碼必須在6~10位之間
                               </div>
                    </div>
                    <div class="form-group">
                      <input id="register-passwords" class="input-material" type="password" name="registerPasswords" placeholder="確認密碼"   >
                        <div class="invalid-feedback">
                                    兩次密碼必須相同 且在6~10位之間
                               </div>
                    </div>
                    <div class="form-group">
                      <button id="regbtn" type="button" name="registerSubmit" class="btn btn-primary">註冊</button>
                    </div>
                  <small>已有賬號?</small><a href="login.html" class="signup">&nbsp;登入</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
    <script>
        $(function(){
           /*錯誤class  form-control is-invalid
           正確class  form-control is-valid*/
           var flagName=false;
           var flagPas=false;
           var flagPass=false;
           /*驗證使用者名稱*/
           var name,passWord,passWords;
           $("#register-username").change(function(){
              name=$("#register-username").val();
              if(name.length<2||name.length>10){
                 $("#register-username").removeClass("form-control is-valid")
                 $("#register-username").addClass("form-control is-invalid");
                 flagName=false;
              }else{
                 $("#register-username").removeClass("form-control is-invalid")
                 $("#register-username").addClass("form-control is-valid");
                 flagName=true;
              }
           })
           /*驗證密碼*/
           $("#register-password").change(function(){
              passWord=$("#register-password").val();
              if(passWord.length<6||passWord.length>18){
                 $("#register-password").removeClass("form-control is-valid")
                 $("#register-password").addClass("form-control is-invalid");
                 flagPas=false;
              }else{
                 $("#register-password").removeClass("form-control is-invalid")
                 $("#register-password").addClass("form-control is-valid");
                 flagPas=true;
              }
           })
           /*驗證確認密碼*/
           $("#register-passwords").change(function(){
              passWords=$("#register-passwords").val();
              if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){
                 $("#register-passwords").removeClass("form-control is-valid")
                 $("#register-passwords").addClass("form-control is-invalid");
                 flagPass=false;
              }else{
                 $("#register-passwords").removeClass("form-control is-invalid")
                 $("#register-passwords").addClass("form-control is-valid");
                 flagPass=true;
              }
           })
           
           
           $("#regbtn").click(function(){
              if(flagName&&flagPas&&flagPass){
                 localStorage.setItem("name",name);
                 localStorage.setItem("passWord",passWord);
                 location="login.html"
              }else{
                 if(!flagName){
                    $("#register-username").addClass("form-control is-invalid");
                 }
                 if(!flagPas){
                    $("#register-password").addClass("form-control is-invalid");
                 }
                 if(!flagPass){
                    $("#register-passwords").addClass("form-control is-invalid");
                 }
              }
           })
        })
    </script>
  </body>
</html>

相關文章