javascript - 绑定(bind) jQuery 事件的简写

Question

假设我们有一个简单的表单验证代码，可以在多个输入字段上绑定(bind)事件监听器:

    var self = this,
        name = $("#name") || opts.name,
        surname = $("#surname") opts.surname,
        email = $("#email") || opts.email ,
        phone = $("#phone") || opts.phone;

    name.on('blur change', function() {
        self.validateName(name);
    });
    surname.on('blur change', function() {
        self.validateSurname(surname);
    });
    email.on('blur change', function() {
        self.validateEmail(email);
    });
    phone.on('blur change', function() {
        self.validatePhone(phone);
    });

有什么办法可以在不损失任何性能的情况下缩短这个时间吗？例如，如果我想检查表单中是否存在某些输入，则会有太多重复的 if(input) {...} 语句。

UPD:ID(或类)可以不同，函数可以接受带有输入字段的对象:

var validation = new Validation({
    name: $('.name'), 
    surname:..
});

Answer 1

将ids改为Name、Surname、Email、Phone，即可确定相关验证器公式化:

var self = this;
$("#Name, #Surname, #Email, #Phone").on('blur change', function() {
    self['validate' + this.id]($(this));
});

编辑

模糊/更改处理程序可以概括如下:

$("myForm input").on('blur change', function() {
    var fn = self['validate' + this.id];
    if(fn) {
        fn($(this));
    }
});

然后您需要做的就是确保所有需要验证的输入字段都具有

• 适当的 ID
• 相应的验证函数

if(fn) 测试可防止任何不需要验证的输入(即没有验证函数)引发错误。

为了满足任何非输入的需求，您需要扩大 $("myForm input") 选择器选择的元素范围。