JQuery实现表单验证-CSDN博客

今天在用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>
复制代码