function check(flag) {
if (flag === true) {
$(".submit").keyup();
return $("input.error").length > 0;
}
$(".submit").keyup(function() {
var flag = $(this).val().length > 100;
$(this).toggleClass('error', flag);
});
}
平时页面里面有些小验证,一般是不高兴搞插件,自己手写的。这两天连续写了几个验证,每次都会改进一点,今天发现验证很适合使用惰性载入函数。
如果我们要验证一个input,要从两方面来,一是在输入时需要验证,二是在提交数据时也需要验证一次。
这两者的验证逻辑是一样的,所以肯定是写一个方法调两次。一次是页面加载进来时就给input绑定事件,假设绑的是keyup;二是需要在调教时在触发一次,我一般是将input的keyup事件主动触发一次。
虽然两次调用的验证逻辑一样,但提交时的验证需要返回值来告知是否通过验证,起初是这么写的
function check (a) {
$(".submit").keyup(function() {
var flag = $(this).val().length > 100;
$(this).toggleClass('error', flag);
});
if (a===true) {
$(".submit").keyup();
return $("input.error").length > 0;
}
}
在页面载入时调check(),在提交时调check(true);
这样写问题比较明显,因为调check(true)时,input又被再次绑定了事件,虽然最后的执行结果没问题,但肯定不行的哇。
于是改成这样
function check(a) {
if (a=== true) {
$(".submit").keyup();
return $("input.error").length > 0;
}
$(".submit").keyup(function() {
var flag = $(this).val().length > 100;
$(this).toggleClass('error', flag);
});
}
换个位置就好多了,input只有check()时才会被调一次。但check()每次都需要if判断一次,而且那个a参数也很累赘。而a参数的主要作用就是判断check函数是否是第一次调用。而这正是惰性载入函数能完成的事
于是改成这样
function check() {
$(".submit").keyup(function() {
var flag = $(this).val().length > 100;
$(this).toggleClass('error', flag);
});
check = function () {
$(".submit").keyup();
return $("input.error").length > 0;
}
}
这时就不需要a参数了,因为第一次载入时,check()函数会给input绑定事件,然后check()函数就被复写了,此时的check函数已经变成了
check = function () {
$(".submit").keyup();
return $("input.error").length > 0;
}
这样看上去就舒服多了。