什么是jQuery中的非侵入式验证

jQuery中的非侵入式验证（Non-Intrusive Validation）是一种用于验证用户输入的技术，它可以通过JavaScript在页面上实时检测用户输入的有效性，并且在需要的时候提示错误信息。

通过使用非侵入式验证技术，我们可以在不干扰正常用户输入流程的情况下，有效地避免一些常见的输入错误，比如无效的邮件地址、密码过短等等。以下是非侵入式验证的实现过程：

1. 在HTML中添加验证规则

为了使用非侵入式验证，我们需要在HTML中给表单元素添加验证规则，这些规则定义了用户输入应该符合的条件，比如长度、格式、必填等等。使用HTML5新增的验证属性可以很方便地实现这一点，比如：

<label>Email:</label>
<input type="email" name="email" required>

上面的代码中，我们给input元素添加了type="email"和required属性，表明输入的内容必须是一个合法的邮箱地址，并且不能为空。

1. 使用jQuery实现验证

为了实现非侵入式验证，我们需要使用jQuery来监测用户输入，并且在需要的时候显示错误信息。这个过程可以通过jQuery插件来完成，比如jQuery Validation插件。

通过jQuery Validation插件，我们可以很方便地定义验证规则，并且在需要的时候提示错误信息。例如：

<form id="register-form">
  <label>Email:</label>
  <input type="email" name="email" required>

  <label>Password:</label>
  <input type="password" name="password" minlength="8" required>

  <button type="submit">Register</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
  $('#register-form').validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 8
      }
    }
  });
</script>

上面的代码中，我们使用了jQuery Validation插件来定义了email和password两个输入框的验证规则。email的验证规则定义为必填和合法的邮箱地址，password的验证规则定义为必填和最小长度为8个字符。当用户输入不符合这些规则的时候，jQuery Validation插件会自动提示错误信息。

除了jQuery Validation插件外，还有许多其他的非侵入式验证插件可供选择，例如Parsley.js和FormValidation.io等。

需要注意的是，非侵入式验证不能完全替代后端的数据校验，因为客户端的验证规则是容易被绕过和篡改的。因此，在实际开发中，我们需要同时使用前端和后端的验证规则，以确保输入的数据是合法的、安全的。