jQuery+js监听的问题心得
$(document).ready(function() {
//处理表单输入框的聚焦和无焦时CSS样式
$('form :text,form :password').focus(function() {
$(this).addClass('focus_input');
}).blur(function() {
$(this).removeClass('focus_input');
})
//为非异步请求的输入框添加离开焦点时的验证事件
$('form :input:not(#username,#nickname)').blur(function(event){
checkInfo(event);
});
//为需要异步请求的输入框(用户名和昵称)添加在修改内容后离开焦点时的验证事件
$('#username,#nickname').change(function () {
$(this).one('blur',function(event) {
checkInfo(event);
})
});
});
function checkInfo(event) {
alert('ok');
var resultMessage = '';
var $target = event.target;
switch ($target.id) {
case 'username':
checkUsername();
break;
case 'nickname':
checkNickname();
break;
case 'pwd2':
checkPwd();
break;
case 'realname':
checkRealname();
break;
}
//检查用户名
function checkUsername() {
var regUsername = new RegExp(/^[a-zA-Z0-9][\w-]{3,17}$/g);
if(!regUsername.test($target.value)) {
if ($target.value == '') {
resultMessage = '用户名不能为空';
}
else if ($target.value.length < 4 || $target.value.length > 18) {
resultMessage = '长度应为4到18个字符';
}
else if ($target.value.indexOf('-') == 0) {
resultMessage = '不能以"-"开头';
}
else if ($target.value.indexOf('_') == 0) {
resultMessage = '不能以"_"开头';
} else {
resultMessage = '用户名格式错误';
}
manageResult($target,resultMessage,false);
} else {
manageResult($target,'',true);
}
}
//检查昵称
function checkNickname() {
var regNickname = new RegExp(/^[^\|\+\)\(\*&\^%\$#@\!~\=\\\}\{\]\[\:;\?><]{4,10}$/);
var matchCharacters = new RegExp(/[\|\+\)\(\*&\^%\$#@\!~\=\\\}\{\]\[\:;\?><]+/g);
if (!regNickname.test($target.value)) {
if ($target.value.length < 4 || $target.value.length > 10) {
resultMessage = '长度应为4到10个字符';
} else if(matchCharacters.test($target.value)) {
resultMessage = '不能包含特殊字符' + $target.value.match(matchCharacters).join('');
}
else {
resultMessage = '昵称格式错误';
}
manageResult($target,resultMessage,false);
} else {
manageResult($target,'',true);
}
}
jQuery的基本语法就不做介绍：
1.ready方法相当于onload的方法！
2.是增加监听，$('#username,#nickname').change(function () {
$(this).one('blur',function(event) {
checkInfo(event);
})
});
这是为'#username,#nickname'的+上change和blur监听，其中blur只运行一次。
3.var regUsername = new RegExp(/^[a-zA-Z0-9][\w-]{3,17}$/g);创建正则。.test($target.value)是匹配正则。
4. $target.value.match(matchCharacters).join('');是将matchCharacters中的存在于$target.value的字符组成字符串
问题：
1.开始的时候用的是match没有+。join（“”）方法，这时会返回一个数组。但是要注意。如果用上面matchCharacters这个正则变量的时候，他会把没有转义“\”的字符认为是一个，所以会出现几个特殊符号在一个数组下标下。
2.开始+监听的时候没有用一次性事件而是用的永久的事件。这样就会出现重复绑定的错误导致程序出现了多次运行。
在此问题出现后，曾经试过用解绑的方法但效果不好，！。原因：当你触发change的时候就会绑定一个blur，这时你不触发change但是blur事件还是存在这样就与设计相违背。所以采用一次性事件！
写的不好请大家见谅！