Vue.js怎么進行form validation

小編給大家分享一下Vue.js怎么進行form validation，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Vue.js如何優(yōu)雅的進行form validation？

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

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

網友1、曾廣營

這個現(xiàn)在我可以回答了。

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

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

報錯時機可選

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

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

按順序來校驗報錯

我寫了一篇博文來記載

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

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

補充：

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

網友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 }

 // 只注冊回調，不注冊數(shù)據(jù)
 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(() => {
  // 定義了校驗規(guī)則
  if (vm.validate) {
   vm.$validation.fields.push(vm)
   // 加載完成自動檢查
   if (auto) {
   vm.$validate()
   }
  }
  })
 }
 }
}

還有一個網友推薦的：試試這個自帶氣泡提示的vue校驗插件，配合vue-hook-form能夠輕松實現(xiàn)表單校驗

以上是“Vue.js怎么進行form validation”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！