介绍
jQuery Validation Unobtrusive 是一个轻量级的 jQuery 插件，用于验证表单数据。它是 ASP.NET MVC 中常用的一种验证方式。该插件通过添加 HTML5 数据属性来标记要验证的表单元素，并使用 jQuery validate 插件完成验证过程。
本篇文章将介绍如何使用 npm 包 jquery-validation-unobtrusive，以及如何在前端中实现表单验证。
安装
使用 npm 命令安装 jquery-validation-unobtrusive：
npm install jquery-validation-unobtrusive
引入
在 HTML 页面中引入必要脚本：
<!-- 引入 jQuery 库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jquery-validation 插件库 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> <!-- 引入 jquery-validation-unobtrusive 插件库 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"></script>
使用方法
添加验证规则
在需要验证的表单元素中添加 HTML5 数据属性，例如：
-- -------------------- ---- -------
----- ------------- -------------------
-----
------ --------------------------
------ ----------- ------------- --------------- -------- --------------- -------------------------- --
----- ------------------------------ -------------------------- ----------------------------------
------
-----
------ -------------------------
------ --------------- ------------- --------------- -------- --------------- ------------------------- --
----- ------------------------------ -------------------------- ----------------------------------
------
------- -------------------------
-------在上面的代码中，我们为用户名和密码这两个表单元素添加了 HTML5 数据属性：
required：表示该元素必填。data-val：表示该元素需要进行验证。data-val-required：表示该元素的错误提示信息。
进行验证
我们可以使用 jQuery.validate 插件的 validate() 方法来进行表单验证：
$('form').validate();此时，当用户提交表单时，会对所有需要验证的表单元素进行验证，并显示出错信息。
高级用法
除了基本的表单验证外，jquery-validation-unobtrusive 还支持一些高级用法，例如：
Ajax 表单验证
如果你想要在表单提交前进行异步验证，可以使用下面的方式：
-- -------------------- ---- -------
--------------------
-------------- -------------- -
-- -- ---- ------
--------
---- ------------
----- ------------
----- --------------------
-------- ------------------ -
-- ------
--
------ ------------------ -
-- ------
-
---
-
---自定义验证规则
如果内置的验证规则不能满足需求，可以通过 addMethod() 方法自定义验证规则：
-- -------------------- ---- -------
------------------------------ --------------- -------- -
------ ---------------------- -- --------------------------
-- --------------
--------------------
------ -
------ -
--------- -----
------ ----
-
-
---上面的代码中，我们为表单元素添加了一个名为“phone”的自定义验证规则，用于验证手机号码。
总结
jquery-validation-unobtrusive 是一个功能强大、使用简单的前端表单验证插件，它能够帮助我们轻松地实现表单验证功能。在使用过程中，我们需要注意添加正确的 HTML5 数据属性，并按
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38265