简介
Valerian 是一个高性能的前端响应式表单验证器，可以用于验证表单输入以及前端交互校验等场景。本文将介绍如何使用 npm 包 valerian。
安装
通过 npm 安装 valerian：
npm install valerian --save
使用
导入
使用 ES 模块方式导入 valerian：
import { createFormValidator } from 'valerian';创建验证器
创建表单验证器，参数为表单元素：
const validator = createFormValidator(document.forms[0]);
验证规则
添加表单验证规则，规则对象包含 name、message 和 validator 三个属性，name 为验证规则的名称，validator 为验证函数。
validator.addRule({
name: 'required',
message: '必填项',
validator: function (value) {
return value.trim() !== '';
}
});验证表单
验证表单：
const result = validator.validate(); // 返回验证结果对象
验证结果
验证结果对象包含两个属性，valid 和 errors，valid 表示表单是否验证通过，errors 为错误信息数组。
console.log(result.valid); // true or false console.log(result.errors); // ['必填项']
示例代码
以下是一个简单的表单验证示例代码：
-- -------------------- ---- -------
------ - ------------------- - ---- -----------
----- --------- - ---------------------------------------
-------------------
----- -----------
-------- ------
---------- -------- ------- -
------ ------------ --- ---
-
---
-------------------
----- --------
-------- ----------------
---------- -------- ------- -
--- -- - -----------------------------
------ ---------------
-
---
----------------------------------------------------------- -------- -- -
----- ------ - ---------------------
-- -------------- -
-- ----
- ---- -
-- ------
---------------------------
-
---总结
通过本文，我们学习了如何使用 npm 包 valerian 实现前端表单验证，我们可以轻松自定义验证规则，实现表单输入的正确性校验以及前端交互校验等功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbb81e8991b448e62be