Vue.js如何優(yōu)雅的進(jìn)行form validation
本文針對(duì)知乎上關(guān)于Vue.js如何優(yōu)雅的進(jìn)行form validation問(wèn)題進(jìn)行了整理,供大家參考,具體內(nèi)容如下
Vue.js如何優(yōu)雅的進(jìn)行form validation?
1. 所有validation rules是被集中管理,而不是每個(gè)文件自己一種,導(dǎo)致驗(yàn)證規(guī)則冗余。
2. 能夠進(jìn)行remote validate。
3. 不用JQuery。
現(xiàn)有的插件vuejs/vue-validator · GitHub只能實(shí)現(xiàn)普通驗(yàn)證,但如何解決1,因?yàn)関ue-validator沒有把校驗(yàn)規(guī)則給抽象出來(lái),沒辦法,現(xiàn)在只能自己代碼上再抽出一層rules來(lái)管理。remote validation只能手寫借助Jquery ajax來(lái)驗(yàn)證。
網(wǎng)友1、曾廣營(yíng)
這個(gè)現(xiàn)在我可以回答了。
我覺得 vue-validator 太冗余了。所以自己寫了個(gè)項(xiàng)目用的插件 va.js,它實(shí)現(xiàn)了
集中式的管理 校驗(yàn)規(guī)則 和 報(bào)錯(cuò)模板。
報(bào)錯(cuò)時(shí)機(jī)可選
校驗(yàn)正確后的數(shù)據(jù),已經(jīng)打包成對(duì)象,可以直接用
允許各個(gè)頁(yè)面對(duì)規(guī)則進(jìn)行覆蓋,對(duì)報(bào)錯(cuò)信息進(jìn)行自定義修改,以及允許ajax獲取數(shù)據(jù)后,再對(duì)規(guī)則進(jìn)行補(bǔ)充
按順序來(lái)校驗(yàn)報(bào)錯(cuò)
我寫了一篇博文來(lái)記載
va.js的寫作歷程。va.js——Vue 表單驗(yàn)證插件的寫作過(guò)程
我個(gè)人觀點(diǎn)。表單驗(yàn)證的是一種高度定制化的東東。所以網(wǎng)上用的插件,都會(huì)有不盡人意的感覺,因?yàn)橐慈哂?,要么不夠。因此,我分享了思路和源碼。真的想寫的話,借鑒思路自己寫吧。
補(bǔ)充:
1.自定義的js函數(shù)規(guī)則,可以自己再加入。 有個(gè)存儲(chǔ)校驗(yàn)函數(shù)的對(duì)象,可以擴(kuò)展。
2.對(duì)ajax的處理僅僅是暴露通過(guò)校驗(yàn)的數(shù)據(jù)的對(duì)象。即假如在ajax前不需驗(yàn)證的話,這份暴露出來(lái)的數(shù)據(jù)是可以提交的;假如需要驗(yàn)證,可以使用這個(gè)暴露出來(lái)的數(shù)據(jù),對(duì)單個(gè)或多個(gè)字段加上額外的校驗(yàn)。
網(wǎng)友2、冉聰杰
推薦:vee-validate https://github.com/logaretm/vee-validate/
網(wǎng)友3、李文富
自己簡(jiǎn)單寫一個(gè),支持異步,支持任意 Vue Component,不限定于 Form Element。
來(lái)自: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 } // 只注冊(cè)回調(diào),不注冊(cè)數(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 // 如果此處為校驗(yàn)入口 if ($validator === this && !fromEntry) { // 頂級(jí)往下校驗(yàn)所有子組件 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(() => { // 定義了校驗(yàn)規(guī)則 if (vm.validate) { vm.$validation.fields.push(vm) // 加載完成自動(dòng)檢查 if (auto) { vm.$validate() } } }) } } }
還有一個(gè)網(wǎng)友推薦的:試試這個(gè)自帶氣泡提示的vue校驗(yàn)插件,配合vue-hook-form能夠輕松實(shí)現(xiàn)表單校驗(yàn)
以上就是整理的關(guān)于此類問(wèn)題的幾個(gè)不錯(cuò)的回答,如果大家有更好的答案歡迎分享,希望本文對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法
這篇文章主要介紹了vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法,如果想讓pinia數(shù)據(jù)不會(huì)重復(fù)獲取之前的值需要手動(dòng)強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細(xì)的解決方法,需要的朋友可以參考下2024-04-04關(guān)于element-ui?單選框默認(rèn)值不選中的解決
這篇文章主要介紹了關(guān)于element-ui?單選框默認(rèn)值不選中的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突問(wèn)題
這篇文章主要介紹了vue父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問(wèn)題
v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點(diǎn);如果在運(yùn)行時(shí)條件不太可能改變,則使用v-if 好點(diǎn)2018-03-03