jquery 表单验证之通过 class验证表单不为空

下面就为您详细讲解jquery表单验证之通过class验证表单不为空的完整攻略。

1. 确定需要验证的表单

首先，我们需要确定需要进行验证的表单。在HTML中，我们可以为需要验证的表单元素添加class属性来标识。例如：

<form action="" method="post">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" class="required">
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" class="required">
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" class="required">
  </div>
  <button type="submit">提交</button>
</form>

在以上代码中，我们给需要验证的表单元素添加了一个class属性为"required"。

2. 引入 jQuery 库

接下来，我们需要在我们的页面中引入 jQuery 库。您可以先下载 jQuery 库文件，然后在 HTML 页面中引入，也可以直接通过如下方式引入 jQuery：

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

3. 编写 jQuery 验证代码

在引入 jQuery 后，我们就可以编写验证代码了。首先，我们需要在页面加载完成时给表单元素添加验证事件。可以使用以下代码：

$(function () {
  $('.required').blur(function () {
    if ($(this).val() === '') {
      $(this).addClass('error');
    } else {
      $(this).removeClass('error');
    }
  });
});

在上面的代码中，我们通过选择器获取所有带有 class 为 "required" 的表单元素，并添加了 blur 事件。当表单元素失去焦点时，我们检查其是否为空。如果为空，我们就添加一个 class 为 "error" 的样式，用于标识表单元素出现验证错误。如果不为空，我们就移除 "error" 样式。

另外，我们还可以添加提交按钮的点击事件，在提交时检查所有的表单元素是否验证通过。具体代码如下：

$(function () {
  $('form').submit(function () {
    var success = true;
    $('.required').each(function () {
      if ($(this).val() === '') {
        $(this).addClass('error');
        success = false;
      } else {
        $(this).removeClass('error');
      }
    });

    return success;
  });
});

在上面的代码中，我们首先获取提交按钮，并为其添加了 submit 事件。在事件处理函数中，我们遍历所有带有 class 为 "required" 的表单元素，并检查其是否为空。如果为空，我们就添加一个 class 为 "error" 的样式，并将 success 标记为 false。如果所有表单元素都不为空，则 success 仍为 true。最终，我们根据 success 值返回表单是否可以提交。

4. 添加样式

最后，我们还需要添加样式来标识表单元素是否有验证错误。可以使用如下 CSS 代码：

.error {
  border-color: red;
}

在上面的 CSS 代码中，我们为 class 为 "error" 的表单元素添加了红色边框，用于标识表单元素出现验证错误。

综上，以上就是通过 class 验证表单不为空的 jQuery 表单验证攻略。希望对您有所帮助。