本文針對知乎上關于Vue.js如何優雅的進行form validation問題進行了整理，供大家參考，具體內容如下

Vue.js如何優雅的進行form validation？

1. 所有validation rules是被集中管理，而不是每個文件自己一種，導致驗證規則冗余。
2. 能夠進行remote validate。
3. 不用JQuery。

現有的插件vuejs/vue-validator · GitHub只能實現普通驗證，但如何解決1，因為vue-validator沒有把校驗規則給抽象出來，沒辦法，現在只能自己代碼上再抽出一層rules來管理。remote validation只能手寫借助Jquery ajax來驗證。

網友1、曾廣營

這個現在我可以回答了。

我覺得 vue-validator 太冗余了。所以自己寫了個項目用的插件 va.js，它實現了

集中式的管理 校驗規則 和 報錯模板。

報錯時機可選

校驗正確后的數據，已經打包成對象，可以直接用

允許各個頁面對規則進行覆蓋，對報錯信息進行自定義修改，以及允許ajax獲取數據后，再對規則進行補充

按順序來校驗報錯

我寫了一篇博文來記載

va.js的寫作歷程。va.js——Vue 表單驗證插件的寫作過程

我個人觀點。表單驗證的是一種高度定制化的東東。所以網上用的插件，都會有不盡人意的感覺，因為要么冗余，要么不夠。因此，我分享了思路和源碼。真的想寫的話，借鑒思路自己寫吧。

補充：

1.自定義的js函數規則，可以自己再加入。 有個存儲校驗函數的對象，可以擴展。
2.對ajax的處理僅僅是暴露通過校驗的數據的對象。即假如在ajax前不需驗證的話，這份暴露出來的數據是可以提交的；假如需要驗證，可以使用這個暴露出來的數據，對單個或多個字段加上額外的校驗。 

網友2、冉聰杰

推薦：vee-validate https://github.com/logaretm/vee-validate/

網友3、李文富

自己簡單寫一個，支持異步，支持任意 Vue Component，不限定于 Form Element。

來自：https://github.com/crossjs/plato/blob/master/src/modules/validator/index.js

看 return 部分即可：

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()   }  }  }) } }}