介绍
hc-awesome-validation 是一个方便快捷的表单验证库，它通过简单的配置即可实现复杂的表单验证需求。该库提供了丰富的验证规则和自定义规则的支持，并且支持异步验证。它还提供了灵活的错误提示机制，可以对表单中的每个字段进行单独设置。
安装
可以通过 npm 来安装 hc-awesome-validation 库。
npm install hc-awesome-validation
使用示例
hc-awesome-validation 非常易于使用，并且提供了详细的文档和示例。下面是一个简单的使用示例。
HTML
-- -------------------- ---- ------- ----- ------------- ---------- ------ ----------- ------------ ---------------- ---------- ------ ------------ ------------- ---------------- ---------- ------ --------------- ---------------- ---------------- ------------ ------ --------------- ------------------------ ---------------- ------- ------------------------- -------展开代码
JavaScript
-- -------------------- ---- ------- ------ - ---------- --------- - ---- ----------------------- -- ------ ----- ----- - - ----- - - --------- ----- -------- -------- -- - ---- -- ---- --- -------- --------------- - -- ------ - - --------- ----- -------- -------- -- - ----- -------- -------- --------- - -- --------- - - --------- ----- -------- -------- -- - ---- -- ---- --- -------- --------------- - -- ------------------- - - --------- ----- -------- ---------- -- - ----- -------- ------- ----------- -------- ------------ - - - -- ------ ----- --------- - --- ---------------- -- ------ ---------------------- ----- - --------- -------- ---- --------- - ----- ---- --------- -- ---- -- ------ - --------- -------- ----- --------- -- --------- - --------- -------- ---- --------- - ----- ---- --------- -- ---- -- ------------------- - --------- ---------- ----- ------------ - -- -- -------- ----- ---- - ---------------------------------- ------------------------------- ----- ------- -- - ---------------------- -- ---- ----- ------ - ----- ----------------------------------- -- ----------------- -- -------- - ---------------------------------- -- - ----- ----- - ------------ ----- ----- - -------------------------------------- ----- ----- - ---------------------------------------------- ---------------------------- ----------------------------------------------- - ------------- -- - ---- - ---------------- - --展开代码
CSS
label.error { color: red; } label.error .error-message { margin-left: 5px; }
常用 API
以下是常用的 hc-awesome-validation API。
Validator 类
该类是表单验证器的主类。它提供了以下方法。
validate(form: HTMLElement): Promise<errors>
对表单进行验证，并返回验证错误信息。form 参数为表单的根元素。
setMessage(messages: object)
设置错误提示信息。messages 参数为包括表单字段和其对应的错误提示信息的对象。
validator.setMessage({ name: { required: '请填写名字', min: '名字长度不能小于 3 个字符', max: '名字长度不能超过 16 个字符' }, // ... })
add(name: string, rules: object | object[])
添加一个字段的验证规则。name 参数为字段的名称，rules 参数为规则对象或规则对象数组。
validator.add('phone', [ { required: true, message: '手机号不能为空' }, { pattern: /^1\d{10}$/, message: '手机号格式不正确' } ])
createDOM(form: HTMLElement): object
将表单元素转换成 JavaScript 对象。该函数可以用于将表单元素快速转换成对象，用于异步验证等场合。
结语
hc-awesome-validation 可以满足大部分表单验证需求，并且提供了灵活的配置和错误提示机制。除了基本的验证规则之外，它还支持自定义规则和异步验证。希望本文的介绍能够帮助读者了解和使用这个库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bf281e8991b448d995e
