使用async-validator编写Form组件的方法


Posted in Javascript onJanuary 10, 2018

前端开发中,表单的校验一个很常见的功能,一些 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 的最基本用法。

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 组件结合起来呢。

实现思路

用一张图描述一下实现思路。

使用async-validator编写Form组件的方法

Form 组件

Form 组件应该是一个容器,里面包含不定数量的 FormItem 或者其他元素。可以使用 Vue 内置的slot 组件来代表 Form 里面的内容。

Form 组件还需要知道包含了多少个需要校验的 FormItem 组件。一般情况下,父子组件的通信 是通过在子组件上绑定事件实现的,但是这里使用 slot,无法监听到子组件的事件。这里可以在 Form 组件上通过$on 监听事件,FormItem 挂载或者销毁前触发 Form 组件的自定义事件即可。

按照这个思路,我们先编写 Form 组件。

<template>
 <form class="v-form">
  <slot></slot>
 </form> 
</template>
<script>
import AsyncValidator from 'async-validator'
export default {
 name: 'v-form',
 componentName: 'VForm', // 通过 $options.componentName 来找 form 组件
 data () {
  return {
   fields: [], // field: {prop, el},保存 FormItem 的信息。
   formError: {}
  }
 },
 computed: {
  formRules () {
   const descriptor = {}
   this.fields.forEach(({prop}) => {
    if (!Array.isArray(this.rules[prop])) {
     console.warn(`prop 为 ${prop} 的 FormItem 校验规则不存在或者其值不是数组`)
     descriptor[prop] = [{ required: true }]
     return
    }
    descriptor[prop] = this.rules[prop]
   })
   return descriptor
  },
  formValues () {
   return this.fields.reduce((data, {prop}) => {
    data[prop] = this.model[prop]
    return data
   }, {})
  }
 },
 methods: {
  validate (callback) {
   const validator = new AsyncValidator(this.formRules)
   validator.validate(this.formValues, (errors) => {
    let formError = {}
    if (errors && errors.length) {
     errors.forEach(({message, field}) => {
      formError[field] = message
     })
    } else {
     formError = {}
    }
    this.formError = formError
    // 让错误信息的顺序与表单组件的顺序相同
    const errInfo = []
    this.fields.forEach(({prop, el}, index) => {
     if (formError[prop]) {
      errInfo.push(formError[prop])
     }
    })
    callback(errInfo)
   })
  }
 },
 props: {
  model: Object,
  rules: Object
 },
 created () {
  this.$on('form.addField', (field) => {
   if (field) {
    this.fields = [...this.fields, field]
   }
  })
  this.$on('form.removeField', (field) => {
   if (field) {
    this.fields = this.fields.filter(({prop}) => prop !== field.prop)
   }
  })
 }
}
</script>

FormItem 组件

FormItem 组件就简单很多,首先要向上找到包含它的 Form 组件。接下来就可以根据 formError 计算出对应的错误信息。

<template>
 <div class="form-item">
  <label :for="prop" class="form-item-label" v-if="label">
   {{ label }}
  </label>
  <div class="form-item-content">
   <slot></slot>
  </div>
 </div>
</template>
<script>
export default {
 name: 'form-item',
 computed: {
  form () {
   let parent = this.$parent
   while (parent.$options.componentName !== 'VForm') {
    parent = parent.$parent
   }
   return parent
  },
  fieldError () {
   if (!this.prop) {
    return ''
   }
   const formError = this.form.formError
   return formError[this.prop] || ''
  }
 },
 props: {
  prop: String,
  label: String
 }
}
</script>

FormItem 在 mounted 与 beforeDestroy 钩子中还需要触发 Form 组件的一些自定义事件。

<script>
export default {
 // ...
 methods: {
  dispatchEvent (eventName, params) {
   if (typeof this.form !== 'object' && !this.form.$emit) {
    console.error('FormItem必须在Form组件内')
    return
   }
   this.form.$emit(eventName, params)
  }
 },
 mounted () {
  if (this.prop) {
   this.dispatchEvent('form.addField', {
    prop: this.prop,
    el: this.$el
   })
  }
 },
 beforeDestroy () {
  if (this.prop) {
   this.dispatchEvent('form.removeField', {
    prop: this.prop
   })
  }
 }
}
</script>

最后新建一个 index.js 导出编写好的组件。

import VForm from './Form.vue'
import FormItem from './FormItem.vue'

export {
 VForm,
 FormItem
}

3. 使用方式

表单的校验函数是在 Form 组件中。通过$ref 可以访问到 Form 组件,调用 validate 函数,从而获取到相应的校验信息。

使用方法如下:

<template>
 <v-form :model="formData" :rules="rules" ref="form">
  <form-item label="手机号" prop="tel">
   <input type="tel" maxlength="11" v-model.trim="formData.tel"/>
  </form-item>
  <button @click="handleSubmit">保存</button>
 </v-form>
</template>
<script>
 import { VForm, FormItem } from './common/Form'
 export default {
  data () {
   return {
    formData: {
     tel: ''
    },
    rules: {
     tel: [
      {required: true, message: '您的手机号码未输入'},
      {pattern: /^1[34578]\d{9}$/, message: '您的手机号码输入错误'}
     ]
    }
   }
  },
  methods: {
   handleSubmit () {
    this.$refs.form.validate(errs => {
     console.log(errs)
    })
   }
  },
  components: {
   VForm,
   FormItem
  }
 }
</script>

完整的代码点击这里。

4. 总结

本文简单介绍了一下 async-validator 的用法,并实现了一个有校验功能的 Form 组件。这里的实现的 Form 表单存在着很多的不足:(1) 仅仅是在提交表单时才去校验。(2) FormItem 组件也应该根据校验的结果调整 ui,给出相应的提示。所以,Form 组件更适合在交互较少的移动端使用。

大家可以根据这个实现思路,根据应用场景,编写定制化更高的 Form 组件。

参考资料

async-validator
Element ui 的 Form组件
Element ui 的 Form 源码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
js变换显示图片的实例
Apr 16 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 #Javascript
JavaScript实现快速排序的方法分析
Jan 10 #Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
js推箱子小游戏步骤代码解析
Jan 10 #Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 #Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 #Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
You might like
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
如何测量vue应用运行时的性能
2019/06/21 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python抓取最新博客内容并生成Rss
2015/05/17 Python
python简单实例训练(21~30)
2017/11/15 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
python 生成器需注意的小问题
2020/09/29 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL