在前端开发中,前端验证是非常常见的需求。常规的验证方式有 HTML5 的表单验证和手动验证,但是这些验证方式往往不能满足需求的复杂度,比如需要实现异步验证或自定义规则验证。
这时候,我们可以使用一个比较流行的前端验证库 @fimbul/valtyr。
安装
在开始之前,你需要确定你已经安装了 npm。在终端中进入你的项目路径,执行以下命令进行安装:
npm install @fimbul/valtyr --save
使用
安装完成之后,在项目中引入 Library:
import Valtyr from '@fimbul/valtyr';
初始化
在需要进行验证的表单或组件的 JS 中,我们需要先进行 Valtry 的初始化。
-- -------------------- ---- ------- ----- --------- - --- -------- ----------- - --------------- -------- - -- ------------- --- ---------- -- ------------ --- -------- - ------ --------------------- - -- ------ --- --------- -- ----- --- ----- - ------ ------ - ------ --------------------- - - ---
在初始化 Valtyr 的时候,有个 strategies
的参数,这个参数用于定义你要用到的验证策略。Valtyr自带了一些基本策略用于验证,如果你需要自定义一些验证策略则可以将你需要的策略写在 strategies
中进行注册。
规则
在执行验证之前,我们还需要定义一些验证规则,规则包括需要验证的表单元素,以及对应的验证策略和错误提示信息等。
-- -------------------- ---- ------- ----- ----- - - ------------ - --------- ----- ---------- -- --------- - --------- ------ ---- -- ---------- ---------- ------ ---- ---- ---- -- ----- - ----------- - -- -------- - --------- ----- ------ ----- --------- - --------- ------- -- ---------- ------ ------- ------ -- -------- - - --
上面这个对象中,我们定义了两个验证规则,一个是验证名字是否为空并且长度不少于 2 个字符,另一个是验证邮箱是否为空并且是一个合法的邮箱格式。
验证
在初始化 Valtyr 并定义了规则之后,我们就可以开始对表单进行验证了,我们可以通过下面的代码进行验证:
validator.validate(values, rules, (errors) => { // 验证完成后的回调函数。成功时 errors 是空对象,否则是一个包含错误信息的对象 });
在验证函数中,我们需要提供表单数据、验证规则和回调函数,回调函数中将会返回验证结果,如果成功则返回空对象;如果失败则返回一个包含错误信息的对象。
接下来我们就可以在回调函数里面对验证结果进行处理了。
总结
Valtry 是一个非常好用的前端验证库,在我们日常的前端开发中经常会用到,可以非常方便地处理复杂的验证需求。本教程将 Valtry 的安装、初始化、规则定义及验证过程详细介绍,希望对初学者有帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eeda9f5b5cbfe1ea06102ed