场景
最近用Antd-v做后台,自带的验证框架.提供了很多的前台验证方法,找了一圈没有找到结合后端验证的,比较纳闷现在前端同学都自己验证不用后端的验证信息了吗?最终的数据验证应该还是以后端为准.自己写了几个函数.
使用
后端返回数据结构
{
code: 600412,
msg: "数据验证失败",
data: {
userName: "用户名已经存在",
email: "无效的邮箱服务商"
}
}
使用方式
引入插件
import MiValidator from './plugins/validator'
Vue.use(MiValidator)
在组件中调用方式如下
this.$mi.assign(this.$refs.editorForm,result.data);//设置错误信息
this.$mi.clear(this.$refs.editorForm);//清除错误信息
代码
使用这两个函数可以少写一些绑定代码.assign会自动查询目标表单中的栏位,根据v-model绑定的变量名称来识别错误信息.form.name会被识别为name,匹配服务端返回的name的错误信息.
const MiValidator = {}
const ALLOWED_TAGS = 'a-input,a-input-password,a-select,a-switch'
MiValidator.install = function (Vue, options) {
Vue.prototype.$mi = MiValidator
const queryNearParent = (comp, tag) => {
if (comp.$parent) {
if (tag.indexOf(comp.$parent.$options._componentTag) > -1) {
return comp.$parent
} else {
return queryNearParent(comp.$parent, tag)
}
}
return null
}
// 获取引用内部可以附加错误提示的组件
const pickValiateItems = (ref) => {
const rootTag = ref.$options._componentTag
// console.log(ref)
if (rootTag !== 'a-form-model' && rootTag !== 'a-form') {
throw new Error('you can just display validate in on a-form-model or a-form')
}
const children = queryChild(ref)
const nodeMap = {}
for (let i = 0, m = children.length; i < m; i++) {
if (children[i].$vnode.data.model.expression) {
const varExpression = children[i].$vnode.data.model.expression
const index = varExpression.lastIndexOf('.')
const key = index > -1 ? varExpression.substring(index + 1) : varExpression
nodeMap[key] = children[i]
}
}
return nodeMap
}
const queryChild = (comp) => {
let children = []
for (let i = 0, m = comp.$children.length; i < m; i++) {
const child = comp.$children[i]
if (child && child._isVue) {
if (child.$children.length > 0) {
children = children.concat(queryChild(child))
}
if (ALLOWED_TAGS.indexOf(child.$options._componentTag) > -1) {
children.push(child)
}
}
}
return children
}
MiValidator.clear = (ref) => {
const nodeMap = pickValiateItems(ref)
for (const key in nodeMap) {
const parent = queryNearParent(nodeMap[key], 'a-form-item,a-form-model-item')
parent.$data.validateState = null
parent.$data.validateMessage = null
}
}
MiValidator.assign = (ref, erroInfo) => {
const nodeMap = pickValiateItems(ref)
for (const key in erroInfo) {
if (nodeMap[key]) {
const parent = queryNearParent(nodeMap[key], 'a-form-item,a-form-model-item')
parent.$data.validateState = 'error'
parent.$data.validateMessage = erroInfo[key]
}
}
}
}
export default MiValidator
「真诚赞赏，手留余香」
我的乐与怒
真诚赞赏，手留余香
使用微信扫描二维码完成支付
