快捷導(dǎo)航

使用async-validator編寫Form組件的方法

更新時間：2018年01月10日 09:16:51 作者：蘆葦_luwei

本篇文章主要介紹了使用 async-validator 編寫 Form 組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前端開發(fā)中，表單的校驗一個很常見的功能，一些 ui 庫例如ant.design 與Element ui 都實現(xiàn)了有校驗功能的 Form 組件。async-validator 是一個可以對數(shù)據(jù)進(jìn)行異步校驗的庫，ant.design 與 Element ui 的 Form 組件都使用了 async-validator。本文就簡單介紹一下 async-validator 的基本用法以及使用該庫實現(xiàn)一個簡單的有校驗功能的 Form 組件。

1. async-validator 的基本用法

async-validator 的功能是校驗數(shù)據(jù)是否合法，并且根據(jù)校驗規(guī)則給出提示信息。

下面演示一下 async-validator 的最基本用法。

import AsyncValidator from 'async-validator'
// 校驗規(guī)則
const descriptor = {
 username: [
 {
  required: true,
  message: '請?zhí)顚懹脩裘?
 },
 {
  min: 3,
  max: 10,
  message: '用戶名長度為3-10'
 }
 ]
}
// 根據(jù)校驗規(guī)則構(gòu)造一個 validator
const validator = new AsyncValidator(descriptor)
const data = {
 username: 'username'
}
validator.validate(model, (errors, fields) => {
 console.log(errors)
})

當(dāng)數(shù)據(jù)不符合校驗規(guī)則時，在 validator.validate 的回調(diào)函數(shù)中，就可以得到相應(yīng)的錯誤信息。

當(dāng) async-validator 中常見的校驗規(guī)則無法滿足需求時，我們可以編寫自定義的校驗函數(shù)來校驗數(shù)據(jù)。一個簡單的校驗函數(shù)如下。

function validateData (rule, value, callback) {
 let err
 if (value === 'xxxx') {
  err = '不符合規(guī)范'
 }
 callback(err)
}
const descriptor = {
 complex: [
  {
  validator: validateData
  }
 ]
}
const validator = new AsyncValidator(descriptor)

async-validator 支持對數(shù)據(jù)異步校驗，所以在編寫自定義校驗函數(shù)時，不管校驗是否通過，校驗函數(shù)中的 callback 都要調(diào)用。

2. 編寫 Form 組件與 FormItem 組件

現(xiàn)在知道了 async-validator 的使用方法，如何將這個庫跟要編寫的 Form 組件結(jié)合起來呢。

實現(xiàn)思路

用一張圖描述一下實現(xiàn)思路。

Form 組件

Form 組件應(yīng)該是一個容器，里面包含不定數(shù)量的 FormItem 或者其他元素。可以使用 Vue 內(nèi)置的slot 組件來代表 Form 里面的內(nèi)容。

Form 組件還需要知道包含了多少個需要校驗的 FormItem 組件。一般情況下，父子組件的通信是通過在子組件上綁定事件實現(xiàn)的，但是這里使用 slot，無法監(jiān)聽到子組件的事件。這里可以在 Form 組件上通過$on 監(jiān)聽事件，F(xiàn)ormItem 掛載或者銷毀前觸發(fā) 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 校驗規(guī)則不存在或者其值不是數(shù)組`)
     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 組件。接下來就可以根據(jù) formError 計算出對應(yīng)的錯誤信息。

<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 鉤子中還需要觸發(fā) Form 組件的一些自定義事件。

<script>
export default {
 // ...
 methods: {
  dispatchEvent (eventName, params) {
   if (typeof this.form !== 'object' && !this.form.$emit) {
    console.error('FormItem必須在Form組件內(nèi)')
    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 導(dǎo)出編寫好的組件。

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

export {
 VForm,
 FormItem
}

3. 使用方式

表單的校驗函數(shù)是在 Form 組件中。通過$ref 可以訪問到 Form 組件，調(diào)用 validate 函數(shù)，從而獲取到相應(yīng)的校驗信息。

使用方法如下：

<template>
 <v-form :model="formData" :rules="rules" ref="form">
  <form-item label="手機(jī)號" 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: '您的手機(jī)號碼未輸入'},
      {pattern: /^1[34578]\d{9}$/, message: '您的手機(jī)號碼輸入錯誤'}
     ]
    }
   }
  },
  methods: {
   handleSubmit () {
    this.$refs.form.validate(errs => {
     console.log(errs)
    })
   }
  },
  components: {
   VForm,
   FormItem
  }
 }
</script>

完整的代碼點擊這里。

4. 總結(jié)

本文簡單介紹了一下 async-validator 的用法，并實現(xiàn)了一個有校驗功能的 Form 組件。這里的實現(xiàn)的 Form 表單存在著很多的不足：(1) 僅僅是在提交表單時才去校驗。(2) FormItem 組件也應(yīng)該根據(jù)校驗的結(jié)果調(diào)整 ui，給出相應(yīng)的提示。所以，F(xiàn)orm 組件更適合在交互較少的移動端使用。

大家可以根據(jù)這個實現(xiàn)思路，根據(jù)應(yīng)用場景，編寫定制化更高的 Form 組件。