使用async-validator怎么编写一个Form组件
这篇文章将为大家详细讲解有关使用async-validator怎么编写一个Form组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
公司主营业务:成都网站制作、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出楚雄州免费做网站回馈大家。
1. async-validator 的基本用法
async-validator 的功能是校验数据是否合法,并且根据校验规则给出提示信息。
下面演示一下 async-validator 的最基本用法。
import AsyncValidator from 'async-validator' // 校验规则 const descriptor = { username: [ { required: true, message: '请填写用户名' }, { min: 3, max: 10, message: '用户名长度为3-10' } ] } // 根据校验规则构造一个 validator const validator = new AsyncValidator(descriptor) const data = { username: 'username' } validator.validate(model, (errors, fields) => { console.log(errors) })
当数据不符合校验规则时,在 validator.validate 的回调函数中,就可以得到相应的错误信息。
当 async-validator 中常见的校验规则无法满足需求时,我们可以编写自定义的校验函数来校验数据。一个简单的校验函数如下。
function validateData (rule, value, callback) { let err if (value === 'xxxx') { err = '不符合规范' } callback(err) } const descriptor = { complex: [ { validator: validateData } ] } const validator = new AsyncValidator(descriptor)
async-validator 支持对数据异步校验,所以在编写自定义校验函数时,不管校验是否通过,校验函数中的 callback 都要调用。
2. 编写 Form 组件与 FormItem 组件
现在知道了 async-validator 的使用方法,如何将这个库跟要编写的 Form 组件结合起来呢。
实现思路
用一张图描述一下实现思路。
Form 组件
Form 组件应该是一个容器,里面包含不定数量的 FormItem 或者其他元素。可以使用 Vue 内置的slot 组件来代表 Form 里面的内容。
Form 组件还需要知道包含了多少个需要校验的 FormItem 组件。一般情况下,父子组件的通信 是通过在子组件上绑定事件实现的,但是这里使用 slot,无法监听到子组件的事件。这里可以在 Form 组件上通过$on 监听事件,FormItem 挂载或者销毁前触发 Form 组件的自定义事件即可。
按照这个思路,我们先编写 Form 组件。
FormItem 组件
FormItem 组件就简单很多,首先要向上找到包含它的 Form 组件。接下来就可以根据 formError 计算出对应的错误信息。
FormItem 在 mounted 与 beforeDestroy 钩子中还需要触发 Form 组件的一些自定义事件。
最后新建一个 index.js 导出编写好的组件。
import VForm from './Form.vue' import FormItem from './FormItem.vue' export { VForm, FormItem }
3. 使用方式
表单的校验函数是在 Form 组件中。通过$ref 可以访问到 Form 组件,调用 validate 函数,从而获取到相应的校验信息。
使用方法如下:
关于使用async-validator怎么编写一个Form组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章名称:使用async-validator怎么编写一个Form组件
URL分享:http://pwwzsj.com/article/jigppi.html