jQuery 不显眼的验证 ASP.NET 核心 - JavaScript

在 ASP.NET 核心框架中，数据验证是 Web 应用程序开发的重要部分。它能确保我们的应用程序接受有效的数据并能够在必要时拒绝无效的数据。但是，验证可能会变得很难以实现和维护，特别是在我们使用大量的 Ajax 请求和 Web API 的情况下。

为了简化这个问题，我们可以使用 jQuery 不显眼的验证。这个验证库不需要任何额外的设置，而且可以为我们的表单提供强大的数据验证。

安装

在开始使用之前，我们需要引入 jQuery 不显眼的验证库。可以通过 CDN 或者直接下载并引入库文件。

CDN：

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

下载并本地引入：

<script src="/js/jquery.validate.min.js"></script>

使用

在 ASP.NET 核心中，我们可以通过 jQuery 不显眼的验证来快速、简单地实现数据验证。我们只需要为我们的表单添加“必填”属性或其他验证规则，并在需要时将其提交到我们的控制器方法。

HTML 表单

下面是一个示例表单：

<form id="myform">
  <label for="name">用户名</label>
  <input type="text" name="name" id="name" required>
  <br>
  <label for="email">电子邮件</label>
  <input type="email" name="email" id="email" required>
  <br>
  <button type="submit">提交</button>
</form>

这个表单定义了两个必填字段：用户名和电子邮件。我们可以使用 required 属性定义这些字段是必填的。其中，for 属性和 id 属性需要匹配，这样屏幕阅读器才能让用户知道标签的名称。

验证规则

我们可以使用验证规则来为表单中的字段定义更多的验证。例如，我们可以定义密码必须至少包含一个字母和一个数字：

<form id="myform">
  <label for="name">用户名</label>
  <input type="text" name="name" id="name" required>
  <br>
  <label for="email">电子邮件</label>
  <input type="email" name="email" id="email" required>
  <br>
  <label for="password">密码</label>
  <input type="password" name="password" id="password" minlength="6" required pattern="(?=.*\d)(?=.*[a-z]).{6,}">
  <br>
  <button type="submit">提交</button>
</form>

在这个示例中，我们使用 minlength 属性定义密码必须至少包含 6 个字符；使用 pattern 属性定义密码必须包含至少一个字母和一个数字。

验证脚本

我们需要编写一些 JavaScript 代码来验证我们的表单。在这里，我们使用 jQuery 不显眼的验证来实现数据验证并通过 Ajax 提交表单。

$(document).ready(function() {
  $("#myform").validate({
    submitHandler: function(form) {
      $.ajax({
        type: "POST",
        url: "/Home/SaveData",
        data: $(form).serialize(),
        success: function(result) {
          alert(result);
        }
      });
    }
  });
});

在这里，我们使用 validate 方法来初始化表单验证。我们需要指定一个 submitHandler 回调函数，当验证通过时将会调用此函数。在这个回调函数中，我们使用 ajax 方法通过 POST 请求提交表单数据到服务器端，然后显示成功或失败消息。

总结

在 ASP.NET 核心中，使用 jQuery 不显眼的验证是一种简单而强大的数据验证方式。通过简单的 HTML 和 JavaScript 代码，我们可以为我们的表单添加验证规则并通过 Ajax 提交表单数据。这种方法简化了数据验证过程，提高了开发效率。