本文针对知乎上关于Vue.js如何优雅的进行form validation问题进行了整理，供大家参考，具体内容如下
Vue.js如何优雅的进行form validation？
1. 所有validation rules是被集中管理，而不是每个文件自己一种，导致验证规则冗余。 2. 能够进行remote validate。 3. 不用JQuery。
现有的插件vuejs/vue-validator · 只能实现普通验证，但如何解决1，因为vue-validator没有把校验规则给抽象出来，没办法，现在只能自己代码上再抽出一层rules来管理。remote validation只能手写借助Jquery ajax来验证。
网友1、曾广营
这个现在我可以回答了。
我觉得 vue-validator 太冗余了。所以自己写了个项目用的插件 va.js，它实现了
集中式的管理 校验规则 和 报错模板。
报错时机可选
校验正确后的数据，已经打包成对象，可以直接用
允许各个页面对规则进行覆盖，对报错信息进行自定义修改，以及允许ajax获取数据后，再对规则进行补充
按顺序来校验报错
我写了一篇博文来记载
我个人观点。表单验证的是一种高度定制化的东东。所以网上用的插件，都会有不尽人意的感觉，因为要么冗余，要么不够。因此，我分享了思路和源码。真的想写的话，借鉴思路自己写吧。
补充：
1.自定义的js函数规则，可以自己再加入。 有个存储校验函数的对象，可以扩展。 2.对ajax的处理仅仅是暴露通过校验的数据的对象。即假如在ajax前不需验证的话，这份暴露出来的数据是可以提交的；假如需要验证，可以使用这个暴露出来的数据，对单个或多个字段加上额外的校验。
、冉聪杰
、李文富
自己简单写一个，支持异步，支持任意 Vue Component，不限定于 Form Element。
看 return 部分即可：
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,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()
}
}
})
}
}
}
还有一个网友推荐的：试试这个，配合能够轻松实现表单校验
以上就是整理的关于此类问题的几个不错的回答，如果大家有更好的答案欢迎分享，希望本文对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/40127.html
自己简单写一个，支持异步，支持任意 Vue Component，不限定于 Form Element。
看 return 部分即可：
// 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,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()
}
}
})
}
}
}
还有一个网友推荐的：试试这个，配合能够轻松实现表单校验
以上就是整理的关于此类问题的几个不错的回答，如果大家有更好的答案欢迎分享，希望本文对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/40127.html