Question

我有两个输入字段和两个选择字段。

我对输入字段的输入以及当我更改所有字段的选择字段的选择时进行一些前端验证。

我要使其正常工作的唯一方法是将其拆分成这样：

var is_currencyBilling;
var is_countryBilling;
var is_cityBilling;
var is_postalBilling;

$('#cityBilling,#postalBilling').on('input', function () {

    ...

}); 

$('#currencyBilling,#countryBilling').on('change', function () {

    ...

});

有什么办法可以合并吗？还是我必须像上面一样拆分它？

编辑：

如果我将其合并为这样的更改：

$('#cityBilling,#postalBilling,#currencyBilling,#countryBilling').on('change', function () {

    console.log('Test');

    ...

});

...它在我跳到另一个输入字段或某个输入字段失去焦点之后可以工作。但是当我“更改”输入字段的值时，是否有机会保持以前的验证行为正确？

Answer 1

您可以对所有事件使用相同的更改事件，也可以使用$(selectors).on('change input', validate)

之类的多个事件

但是您也可以侦听使用同一事件处理程序的不同事件。

在该处理程序中，您的业务逻辑可以适应事件类型或元素类型或您需要的任何其他特殊条件

基本示例

$('input:text').on('input', validate);
$('input:checkbox').on('click', validate)
$('select').on('change', validate);

function validate(evt) {
  console.clear()
  var $el = $(this),
    val = $el.val();

  console.log(evt.type + ' event on: ' + this.name + ', new value is: ', val);

  if ($el.is('input:text')) {
    console.log('This is an input:text');
    
  } else if ($el.is('select')) {
    console.log('This is a select');
    
  }else if ($el.is('input:checkbox')) {
    console.log('Checkbox is checked = ', this.checked)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Inp1: <input name="input_one" type="text" /> Inp2: <input name="input_two" type="text" /> <br><br> 
Check<input name="check_one" value="one" type="checkbox">
<br><br> 

Sel 1
<select name="sel_one">
  <option></option>
  <option value="1">one</option>
  <option value="2">two</option>
</select>

Sel 2
<select name="sel_two">
  <option></option>
  <option value="1">one</option>
  <option value="2">two</option>
</select>

组合输入并选择输入/更改

1 个答案: