修改

Question

URL

所以，我有这个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">

Answer 2

您的功能validator应该在function() {}事件中。

修改

将event var更改为object。好点@volutionxbox

＆＃13;

var submitbutton = $('#form_submit');
$('#form_primer').on('keyup', function() {
  validator(this)
});
$('#form_szek').on('keyup', function() {
  validator(this)
});

function validator(object) {
  if (isNaN(object.value)) {
    $(object).css('border-color', 'red');
    submitbutton.addClass('disabled');
  } else {
    $(object).css('border-color', 'green');
    submitbutton.removeClass('disabled');
  }
};

＆＃13;

.disabled {
  border: 0;
  background-color: blue;
}

＆＃13;

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

＆＃13;

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

2 个答案:

修改