javascript - 为什么这不起作用？如何将调用者对象传递给函数？

Question

var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator(this));
$('#form_szek').on('keyup', validator(this));

function validator(event){
    if(isNaN(event.value)){
        $(event).css('border-color', 'red');
        submitbutton.addClass('disabled');
    }
    else{
        $(event).css('border-color', 'green');
        submitbutton.removeClass('disabled');
    }
  };

所以，我有这个 javascript，不想写两次验证器函数。此脚本应禁用提交按钮并根据输入将边框着色为红色或绿色。如何将表单元素传递给函数？另外，如何正确禁用表单提交？该按钮无法按下，但如果用户在输入文本后按下回车键，它仍会提交。

Answer 1

您不必将变量传递给事件处理程序，您可以使用 this 关键字直接访问元素:

var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator);
$('#form_szek').on('keyup', validator);

function validator() {
  if (isNaN(this.value)) {
    $(this).css('border-color', 'red');
    submitbutton.addClass('disabled');
  } else {
    $(this).css('border-color', 'green');
    submitbutton.removeClass('disabled');
  }
};

注意:

避免使用 event 作为变量来引用事件处理程序中的元素，它专用于事件本身。

演示:

这是一个工作演示:

var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator);
$('#form_szek').on('keyup', validator);

function validator() {
  if (isNaN(this.value)) {
    $(this).css('border-color', 'red');
    submitbutton.addClass('disabled');
  } else {
    $(this).css('border-color', 'green');
    submitbutton.removeClass('disabled');
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="form_submit">
<input type="text" id="form_primer">
<input type="text" id="form_szek">