网络技术

找论坛
mb46348043
Lv2 太平洋舰队下士
太平洋舰队下士 贡献175,距离下一级还需25贡献
楼主
2018-01-11 09:57 0 0 只看楼主
电梯直达 
  使用async-validator编写Form组件的方法
  前端开发中,表单的校验一个很常见的功能,一些 ui 库例如ant.design 与Element ui 都实现了有校验功能的 Form 组件。async-validator 是一个可以对数据进行异步校验的库,ant.design 与 Element ui 的 Form 组件都使用了 async-validator。本文就简单介绍一下 async-validator 的基本用法以及使用该库实现一个简单的有校验功能的 Form 组件。
  1. async-validator 的基本用法
  async-validator 的功能是校验谭八爷系统开发数据是否合法,并且根据校验规则给出提示信息。
  下面演示一下 async-validator 的最基本用法。
  ?
  23import 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 中常见的校验规则无法满足需求时,我们可以编写自定义的校验函数来校验数据。一个简单的校验函数如下。
  ?
  15function 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 计算出对应的错误信息。
  ?
  {{ label }}
  FormItem 在 mounted 与 beforeDestroy 钩子中还需要触发 Form 组件的一些自定义事件。
  ?
  最后新建一个 index.js 导出编写好的组件。
  ?
  7import VForm from './Form.vue'
  import FormItem from './FormItem.vue'
  export {
  VForm,
  FormItem
  }
  3. 使用方式
  表单的校验函数是在 Form 组件中。通过$ref 可以访问到 Form 组件,调用 validate 函数,从而获取到相应的校验信息。
  使用方法如下:
  ?
  保存
  完整的代码点击这里。

您需要登录后才可以发帖 登录 | 立即注册

其他登录方式:

常用表情
太平洋电脑网论坛帖子仅代表作者本人意见,不代表网站立场。请勿轻信特价、汇款、中奖等信息,
请勿轻易透露个人资料,因此产生的一切后果,PConline不承担任何责任
回复 发新帖 找论坛 反馈 回顶部