简介
livevalidator-theme-uikit3 是一个基于 UIkit 3 框架的表单验证样式库。通过引入该样式库，可以让表单验证的提示信息更加美观和符合UIkit框架的设计风格。
安装
使用 npm 安装 livevalidator-theme-uikit3：
npm install livevalidator-theme-uikit3 --save
使用
引入样式文件
在 HTML 文件中，引入 node_modules/livevalidator-theme-uikit3/dist/livevalidator-theme-uikit3.css 文件：
<link rel="stylesheet" href="node_modules/livevalidator-theme-uikit3/dist/livevalidator-theme-uikit3.css">
设置 liveValidator 样式
在 JS 文件中，使用 liveValidator.setGlobalOptions() 方法设置全局配置，即将 livevalidator-theme-uikit3 作为全局验证样式：
liveValidator.setGlobalOptions({
validClass: 'uk-form-success',
invalidClass: 'uk-form-danger',
messageClass: 'uk-text-small uk-text-danger',
messageTag: 'div'
});应用验证样式
将表单验证提示信息显示在对应的表单元素上，需要在表单元素的父级元素上添加 data-validator-container 属性，如下所示：
-- -------------------- ---- -------
------
---- ------------
------ --------------------- ----------------------- ---------------
---- ------------------------ -------------------------
------ ---------------- ------------ ------------ ---------------- ---------
------
------
---- ------------
------- ---------------- ------------------ -----------------------------
------
-------示例代码
以下是一个基于 livevalidator-theme-uikit3 的表单验证示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------------------- ------------
----- ---------------- -------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------
-------
------
---- -------------------
---- ---------------------
-------- -------
------
---- ------------
------ --------------------- ----------------------- ---------------
---- ------------------------ -------------------------
------ ---------------- ------------ ------------ ---------------- ---------
------
------
---- ------------
------ --------------------- -------------------------------------
---- ------------------------ -------------------------
------ ---------------- --------------- --------------- ------------------- ---------
------
------
---- ------------
------- ---------------- ------------------ -----------------------------
------
-------
------
------
------- ----------------------------------------------------------------
--------
-- ------
--------------------------------
----------- ------------------
------------- -----------------
------------- -------------- ----------------
----------- -----
---
-- ------
-----------------------
--------- ----------------------
------- --------- -------
-------- ------- ----- - ----- ----- --------
---
-----------------------
--------- -------------------------
------- -----------
-------- ------- ----- - ---------
---
-- --- -------------
--- --------- - ----------------------
--------- ----
---
---------
-------
-------总结
使用 livevalidator-theme-uikit3 样式库可以简单的让我们的表单验证提示信息更加美观和符合UIkit框架的设计风格。只需安装、引入和配置，即可实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589f81e8991b448d5eb1