JQuery實現表單驗證

今天在用Jquery改造以前的JS代碼過程當中，遇到了一個讓我懵逼了三小時的問題。 問題的關鍵在 this 的使用。在這裏與你們分享一下。而且分享一下我作表單提交的檢查代碼

錯誤代碼以下：

$("form").submit(function () {
            return checkName() && checkAge() && checkEmail() && checkQq();
        })
        // 驗證姓名
        $('#name').blur(checkName);
        function checkName() {
            // 驗證姓名驗證正則
            var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
            var flag = reg.test($('#name').val());
            if( !flag ){
                $('#error_name').remove();
                $(this).after("<p id='error_name' class='error_msg'>姓名格式不正確 </p>");
            } else {
                $('#error_name').remove();
            }
            return flag;
        }
複製代碼

分析：

這段代碼在執行過程當中，驗證姓名的離焦事件是能夠成功觸發並執行監聽器代碼，

然而提交事件在執行 checkName() 方法過程當中，因爲 $(this) 語句在執行過程當中，this 對象指代的是並不是Input標籤對象。所以代碼不能執行到 return 行。沒法阻止表單提交。

那提交事件執行 checkName 方法時，this指代的是什麼呢？咱們試着彈一下它：

在代碼中添加如下代碼:

alert("我是誰？"+this);
    $(this).after("<p id='error_name' class='error_msg'>姓名格式不正確 </p>");
複製代碼

在離焦事件觸發後，窗口彈出：

而當提交事件觸發後，窗口彈出：

至此，問題就真相大白了。 在提交事件觸發時，監聽器代碼中 this 對象指代的是 window 對象，程序執行 after()會出異常。致使 return 語句不能執行。 所以解決問題的方法也很明確：修改this。這裏我將this改爲了'#name'以 id 選擇器爲 input 標籤'造'一個弟弟.

如下是完整代碼：

<script>
    // JQuery 完成表單檢驗
    $(function () {
        // 表單提交函數。檢查name&age&email&qq等屬性符合正則後方可提交
        $("form").submit(function () {
            return checkName() && checkAge() && checkEmail() && checkQq();
        })
        //驗證姓名
        $('#name').blur(checkName);
        function checkName() {
            // 驗證姓名驗證正則
            var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;

            var flag = reg.test($('#name').val());

            if( !flag ){
                $('#error_name').remove();
                $('#name').after("<p id='error_name' class='error_msg'>姓名格式不正確 </p>");
            } else {
                $('#error_name').remove();
            }

            return flag;
        }
        //驗證年齡
        $('#age').blur(checkAge)
        function checkAge() {
            // 驗證姓名驗證正則
            var reg = /^\d{1,3}$/;

            var flag = reg.test($('#age').val());

            if (!flag) {
                $('#error_age').remove();
                $('#age').after("<p id='error_age' class='error_msg'>年齡格式不正確 </p>");
            } else {
                $('#error_age').remove();
            }
            return flag;
        }
        //驗證QQ
        $('#qq').blur(checkQq)
       function checkQq() {
            // 驗證姓名驗證正則
            var reg = /^\d{6,20}$/;

            var flag = reg.test($('#qq').val());

            if( !flag ){
                $('#error_qq').remove();
                $('#qq').after("<p id='error_qq' class='error_msg'>qq格式不正確 </p>");
            } else {
                $('#error_qq').remove();
            }
            return flag;
        }
        //驗證Email
        $('#email').blur(checkEmail)
        function checkEmail() {
            // 驗證驗證碼正則
            var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
            var flag = reg.test($('#email').val());
            if (!flag) {
                $('#error_email').remove();
                $('#email').after("<p id='error_email' class='error_msg'>郵箱格式不正確 </p>");
            } else {
                $('#error_email').remove();
            }
            return flag;
        }
    });
</script>
複製代碼