Question

假设我有两个输入字段的形式

<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
<input type="text" name="form-age" placeholder="age" class="form-first-name form-control require" id="age">

现在，我想用jquery验证这两个输入字段。为此，我正在使用

$('.registration-form input[class="require"]).on('focus', function() {
    $(this).addClass('input-error');
});

但是这里不进行验证。但是，如果我使用

$('.registration-form input[id="name"]).on('focus', function() {
    $(this).addClass('input-error');
});

验证工作正常。

但是我想使用class，否则需要验证每个id的for输入字段。如果我可以使用class，则对我来说更容易验证。

Answer 1

在第一种情况下，使用选择器input[class="require"]仅选择包含一个类require的字段。并且您需要选择包含此类的字段。为此，请通过该类使用该调用：

$('.registration-form .require').on('focus', function(){
  $(this).addClass('input-error');
});

别忘了右撇号。

或者您需要为需要验证的那些元素设置其他通用类（如果类required不适用）。

Answer 2

首先考虑您是否真的想使用onFocus验证字段。这样做将在用户提供任何输入之前验证它们。您可能要在提交或其他用户操作之后验证输入。

我已经制作了一个快速的Codepen来回答您的问题。您可以简单地使用“ input.require.form-control”作为选择器。请记住不要放置任何空格，因为它们位于同一元素（）

https://codepen.io/anon/pen/yrejOG

HTML

```
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
<input type="text" name="form-age" placeholder="age" class="form-first-name form-control require" id="age">
```

JQuery

```
$( "input.require.form-control" ).on( "focus", function() {
 $(this).addClass('input-error');
});
```

希望这会有所帮助

Answer 3

执行此操作的简单方法是使用类选择器，而不是属性选择器。这是解决方案的链接。

$(document).ready(function(){

$('.registration-form .require').on('focus', function() {
    $(this).addClass('input-error');
    $('div').append('<br />'+this.id + ': ' +this.classList.value);   
});

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class = "registration-form">
  <input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
  <input type="text" name="form-age" placeholder="age" class="form-first-name form-control require" id="age">
  <div></div>
</form>

如何在jquery中使用多个输入字段类名称进行验证

3 个答案: