Некоторые предложения:
1) Как указывает Clour Blind, вы можете расширить jQuery, назначив новые функции jQuery.fn
(иначе $.fn
, если вы не используете noConflict
).
2) У вас есть лот из
$(this).foo();
$(this).bar();
$(this).baz();
... и т. Д. Каждый раз, когда вы делаете это, jQuery должен выполнить что-то вроде четырех вызовов функций и выделить память для нового экземпляра jQuery.Вместо этого сделайте это один раз, а затем повторно используйте результат:
var $this = $(this); // You can call it whatever you like
$this.foo();
$this.bar();
$this.baz();
3) Вы совершенно правы, вы можете выделить общность вещей и сделать из них вещь многократного использования.Например, все ваши проверочные функции blur
одинаковы с немного разными кусочками:
$(':input[min]').live('blur',function(){
if($(this).attr('min') > parseInt($(this).val(), 10) ){
$(this).next('.errormsg').html( 'OOPs ... the minimum value is '+$(this).attr('min') );
$(this).parent('form').children('input[type=submit]').hide();
$(this).focus();
} else {}
return false;
});
Так что, возможно:
$.fn.validateOnBlur = function(attrName, errMsg, validator) {
this.live('blur', function() {
var $this = $(this),
limit = parseInt($this.attr(attrName), 10);
if(!validator(limit, parseInt($this.val(), 10) ){
$this.next('.errormsg').html(errMsg.replace("%limit%", limit));
$this.parent('form').children('input[type=submit]').hide();
$this.focus();
} else {}
return false;
});
};
Я сделал несколько очень легких переделоктам:
- Подставляя
attrName
для 'min'
или 'max'
. - Добавление радикального параметра,
10
, для вызовов на parseInt
.Я предполагаю, что ваши значения должны быть десятичными, поэтому, если пользователь вводит «08», вам нужно значение 8, а не ошибка (потому что «08» является недопустимым восьмеричным обозначением).Если задать parseInt
второй параметр, он всегда будет использовать эту базу (10 = десятичное число). - Найдите атрибут ограничения один раз и запомните его.
- Параметризация (в очень минимальной форме) сообщение об ошибке, а затем используйте
replace
для замены предельного значения для токена %limit%
.
, который вы затем использовали бы следующим образом:
$(':input[max]').validateOnBlur(
'max',
'OOPs ... the maximum value is %limit%',
function(limit, value) {
return value <= limit;
}
);
$(':input[min]').validateOnBlur(
'min',
'OOPs ... the minimum value is %limit%',
function(limit, value) {
return value >= limit;
}
);
Или, скорее, вы бы использовали это так:
// In your general purpose stuff
var comparators = {
checkNumberMin: function(limit, value) {
return value >= limit;
},
checkNumberMax: function(limit, value) {
return value <= limit;
}
};
// And then in your specific code using it
$(':input[max]').validateOnBlur(
'max',
'OOPs ... the maximum value is %limit%',
comparators.checkNumberMax
);
$(':input[min]').validateOnBlur(
'min',
'OOPs ... the minimum value is %limit%',
comparators.checkNumberMin
);
Возможно, вы можете пойти дальше и подключить все в одной функции, а не просто blur
, но вы поняли идею.
Примечание: для простых примеров я использовал несколько анонимных функций выше, но я не фанат их на практике; больше здесь .