技術標籤：JavaWebjavaweb

書城專案第一階段，表單驗證

驗證使用者名稱：必須由字母，數字下劃線組成，並且長度為 5 到 12 位

驗證密碼：必須由字母，數字下劃線組成，並且長度為 5 到 12 位

驗證確認密碼：和密碼相同

郵箱驗證：[email protected]

驗證碼：現在只需要驗證使用者已輸入。因為還沒講到伺服器。驗證碼生成。

1、新建一個模組

2、把書城的靜態資源拷貝到 05_book_static 工程下：

3、驗證實現如下：

    <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 repwdText = $("#repwd").val();
                //2 和密碼相比較
                if (repwdText != passwordText){
                    //3 提示使用者
                    $("span.errorMsg").text("確認密碼和密碼不一致！");
                    return false;
                }

                // 郵箱驗證：[email protected]
                //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();

                //去掉驗證碼前後空格
                // alert("去空格前:["+codeText+"]")
                codeText = $.trim(codeText);
                // alert("去空格後:["+codeText+"]")


                if (codeText == null || codeText == ""){
                    //4 提示使用者
                    $("span.errorMsg").text("驗證碼不能為空！")

                    return false;
                }
                //去掉錯誤資訊
                $("span.errorMsg").text("");
            });
        });

    </script>