vue 表单ajax 校验,Vue.js如何优雅的进行form validation

本文针对知乎上关于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获取数据后，再对规则进行补充

按顺序来校验报错

我写了一篇博文来记载

我个人观点。表单验证的是一种高度定制化的东东。所以网上用的插件，都会有不尽人意的感觉，因为要么冗余，要么不够。因此，我分享了思路和源码。真的想写的话，借鉴思路自己写吧。

补充：

1.自定义的js函数规则，可以自己再加入。 有个存储校验函数的对象，可以扩展。

2.对ajax的处理仅仅是暴露通过校验的数据的对象。即假如在ajax前不需验证的话，这份暴露出来的数据是可以提交的；假如需要验证，可以使用这个暴露出来的数据，对单个或多个字段加上额外的校验。

网友2、冉聪杰

网友3、李文富

自己简单写一个，支持异步，支持任意 Vue Component，不限定于 Form Element。

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

}

}

})

}

}

}

还有一个网友推荐的：试试这个自带气泡提示的vue校验插件，配合vue-hook-form能够轻松实现表单校验

以上就是整理的关于此类问题的几个不错的回答，如果大家有更好的答案欢迎分享，希望本文对大家的学习有所帮助，也希望大家多多支持脚本之家。