Vue.js如何优雅的进行form validation

import Vue from 'vue'import * as rules from './rules'import promisify from 'util/promisify'export default (context, options = {}) => { // options = { scope: 'validator', prefix: '/', ...options } // 只注册回调，不注册数据 return () => { Vue.mixin({  beforeCreate () {  const options = this.$options  const { validator } = options  if (validator) {   // 在入口处定义 $validation   Vue.util.defineReactive(this, '$validation', {   fields: [],   errors: []   })   this.$validator = this   nextTick(this, validator.auto)  } else {   const { parent } = options   if (parent && parent.$validation) {   this.$validation = parent.$validation   this.$validator = parent.$validator   nextTick(this, parent.$validator.$options.validator.auto)   }  }  } }) /**  * $validate  *  * validate vm recursively.  *  * @return {Promise}  */ Vue.prototype.$validate = function (fromEntry) {  const { validate, $validation = {}, $validator } = this  // 如果此处为校验入口  if ($validator === this && !fromEntry) {  // 顶级往下校验所有子组件  return Promise.all($validation.fields   .map(field => field.$validate(true)))   .then(() => $validation)   .catch(() => Promise.reject($validation))  } else {  if (!validate) {   return Promise.resolve($validation)  }  return Promise.all(Object.keys(validate).map(key => {   return new Promise((resolve, reject) => {   const { validator = rules[key], rule, message } = validate[key]   if (validator) {    // reject if falsy    promisify(validator(this.value, rule), true)    .then(resolve)    .catch(() => {     reject({     field: this.field || this,     rule,     message     })    })   } else {    __PROD__ || console.warn(`'${key}' is NOT a valid validator`)    resolve()   }   })  })).then(() => {   updateErrors($validation.errors, this)   return $validation  }).catch(error => {   updateErrors($validation.errors, this, error)   return Promise.reject($validation)  })  } } function updateErrors (errors, vm, replacement) {  const field = vm.field || vm  const found = errors.some((error, index) => {  if (error.field === field) {   if (replacement) {   errors.splice(index, 1, replacement)   } else {   errors.splice(index, 1)   }   return true  }  return false  })  if (!found && replacement) {  errors.push(replacement)  }  return errors } function nextTick (vm, auto) {  vm.$nextTick(() => {  // 定义了校验规则  if (vm.validate) {   vm.$validation.fields.push(vm)   // 加载完成自动检查   if (auto) {   vm.$validate()   }  }  }) } }}