简介
jQuery-Validation-Engine是一个用于前端表单验证的插件，可以通过npm进行安装和使用。该插件提供了多种验证方式，包括必填、邮箱格式、手机号格式、URL格式等。同时，也支持自定义错误提示信息，使得验证结果更加友好。
在本文中，我们将详细介绍如何使用npm安装和使用jQuery-Validation-Engine插件，并给出示例代码和深入指导。
安装
要使用jQuery-Validation-Engine，首先需要安装它。可以通过以下命令完成安装：
--- ------- ------------------------
安装完成后，在项目中引入相关文件即可开始使用该插件。
使用
下面，我们以一个简单的登录表单为例，演示如何使用jQuery-Validation-Engine进行验证。
HTML结构
----- --------------- ------ --------------------------- ------ ----------- ------------- --------------- --------------------------- ------ -------------------------- ------ --------------- ------------- --------------- -------------------------------------- ------- ------------------------- -------
JS代码
-- ---------------------------------
------ - ---- ---------
------ ---------------------------
------------ -
-- ------
----------------------------------
--------------- -----------
------- -----
---
-- ------
---------------------------- ----------- -
-------------------
-- ----
-- -------------------------------------- -
-- -------------
--------------------
- ---- -
-- --------------
----------------------------
-
---
---在上面的代码中，我们首先引入了jQuery和jQuery-Validation-Engine。然后，在页面加载完成后，使用$('#loginForm').validationEngine()方法配置插件参数，其中：
promptPosition表示错误提示信息位置，本例中设置为右上角；scroll表示当验证失败时是否滚动到第一个失败的元素，默认为true。
接着，我们为表单提交事件绑定了一个回调函数，在该函数中调用$(this).validationEngine('validate')方法验证表单是否合法。如果验证通过，则执行登录逻辑；否则，提示错误信息。
样式
除了JS代码之外，我们还需要为表单添加一些样式。jQuery-Validation-Engine提供了一些默认样式，可以通过引入它们来快速实现表单验证的效果。
---- ---- ---
----- ---------------- -----------------------------------------------------------------------------
---- ------ ---
----- -------------- ------------------------
---- -------------------
------ -------------- --------------- ---------------------------
---- ------------------
------ ----------- ------------- --------------- ------------------- --------------------
------
------
---- -------------------
------ -------------- --------------- --------------------------
---- ------------------
------ --------------- ------------- --------------- ------------------- -------------------------------
------
------
---- -------------------
---- ---------------------- -----------
------- ------------- ---------- ------------------------
------
------
-------在上面的代码中，我们为表单添加了Bootstrap样式，并将其结构改为水平布局。同时，还引入了jQuery-Validation-Engine的默认样式文件，以实现错误
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/34125