<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 组件中。通过可以访问到 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 组件。
参考资料