今天在用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指代的是什么呢?我们试着弹一下它:
在代码中添加以下代码:
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>