Day116.簡單書城專案---第一階段 -JavaWeb

轉行一點成功發表於2020-11-28
JavaWeb

書城專案—第一階段(表單驗證)

驗證使用者名稱：必須由字母，數字下劃線組成，並且長度為 5 到 12 位 
驗證密碼：必須由字母，數字下劃線組成，並且長度為 5 到 12 位 
驗證確認密碼：和密碼相同 郵箱驗證：xxxxx@xxx.com 
驗證碼：現在只需要驗證使用者已輸入。因為還沒講到伺服器。驗證碼生成。

1.建立一個模組

在這裡插入圖片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚矽谷會員註冊頁面</title>
   <link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
   <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      //頁面載入完成之後
      $(function (){
         //註冊繫結單擊事件
         $("#sub_btn").click(function (){

            // 驗證使用者名稱：必須由字母，數字下劃線組成，並且長度為 5 到 12 位
                  //1. 獲取使用者名稱框裡的內容
                     var usernameText = $("#username").val();
                  //2. 建立正規表示式物件
                     var usernamePatt = /^\w{5,12}$/;
                  //3. 使用test()驗證
                     if (!usernamePatt.test(usernameText)){
                        //4. 提示使用者結果
                        $("span.errorMsg").text("使用者名稱不合法");
                        return false;
                     }

            // 驗證密碼：必須由字母，數字下劃線組成，並且長度為 5 到 12 位
                  //1. 獲取密碼框裡的內容
                  var passwordText = $("#password").val();
                  //2. 建立正規表示式物件
                  var passwordPatt = /^\w{5,12}$/;
                  //3. 使用test()驗證
                  if (!passwordPatt.test(passwordText)){
                     //4. 提示使用者結果
                     $("span.errorMsg").text("密碼不合法");
                     return false;
                  }

            // 驗證確認密碼：和密碼相同
                  //1. 獲取確認密碼框裡的內容
                  var repasswordText = $("#repwd").val();
                  //2. 和密碼比較
                  if (repasswordText != passwordText){
                     //3. 提示使用者結果
                     $("span.errorMsg").text("確認密碼和密碼不一致");

                     return false;
                  }

            //郵箱驗證：xxxxx@xxx.com
                  //1. 獲取郵箱框裡的內容
                  var emailText = $("#email").val();
                  //2. 建立正規表示式物件
                  var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                  //3. 使用test()驗證
                  if (!emailPatt.test(emailText)){
                     //4.提示使用者結果
                     $("span.errorMsg").text("郵箱格式非法");

                     return false;
                  }


				// 驗證碼：現在只需要驗證使用者已輸入。因為還沒講到伺服器。驗證碼生成。
						var codeText = $("#code").val();
						//去掉驗證碼前後空格內容
							var trim = $.trim(codeText);
						if (trim==null||trim===""){
							//提示使用者
							$("span.errorMsg").text("請輸入驗證碼");

							return false;
						}


            $("span.errorMsg").text("");

         });




      });


   </script>
<style type="text/css">
   .login_form{
      height:420px;
      margin-top: 25px;
   }
   
</style>

</head>
<body>
      <div id="login_header">
         <img class="logo_img" alt="" src="../../static/img/logo.gif" >
      </div>
      
         <div class="login_banner">
         
            <div id="l_content">
               <span class="login_word">歡迎註冊</span>
            </div>
            
            <div id="content">
               <div class="login_form">
                  <div class="login_box">
                     <div class="tit">
                        <h1>註冊尚矽谷會員</h1>
                        <span class="errorMsg"></span>
                     </div>
                     <div class="form">
                        <form action="regist_success.html">
                           <label>使用者名稱稱：</label>
                           <input class="itxt" type="text" placeholder="請輸入使用者名稱" autocomplete="off" tabindex="1" name="username" id="username" />
                           <br />
                           <br />
                           <label>使用者密碼：</label>
                           <input class="itxt" type="password" placeholder="請輸入密碼" autocomplete="off" tabindex="1" name="password" id="password" />
                           <br />
                           <br />
                           <label>確認密碼：</label>
                           <input class="itxt" type="password" placeholder="確認密碼" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
                           <br />
                           <br />
                           <label>電子郵件：</label>
                           <input class="itxt" type="text" placeholder="請輸入郵箱地址" autocomplete="off" tabindex="1" name="email" id="email" />
                           <br />
                           <br />
                           <label>驗證碼：</label>
                           <input class="itxt" type="text" style="width: 150px;" id="code"/>
                           <img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">                          
                           <br />
                           <br />
                           <input type="submit" value="註冊" id="sub_btn" />
                           
                        </form>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      <div id="bottom">
         <span>
            尚矽谷書城.Copyright &copy;2015
         </span>
      </div>
</body>
</html>

感謝尚矽谷

相關文章