记录一次Jquery中 this 关键字使用出现的问题
时间:2019-08-23
本文章向大家介绍记录一次Jquery中 this 关键字使用出现的问题,主要包括记录一次Jquery中 this 关键字使用出现的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天在用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>
原文地址:https://www.cnblogs.com/keatsCoder/p/11398244.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 快速学习-Saturn Executor部署
- LeetCode70——爬楼梯
- 快速学习-Saturn创建Namespace
- 理解 Node.js 的 GC 机制
- LeetCode176——第二高的薪水
- 快速学习-Saturn QuickStart
- 快速学习-开发你的作业
- 理解Spring中的IoC和DI
- 快速学习-Saturn性能测试报告
- Java源码系列1——ArrayList
- 【Kubernetes】自定义资源CRDs不支持fieldselector
- Cypress系列(48)- and() 命令详解
- Java源码系列2——HashMap
- 快速学习-Saturn Console部署
- MySQL的各种日志