实现elementUI表单的全局验证的方法步骤

2020-06-16 05:39:45易采站长站整理

let check = this.$validate({label: '号码', value, rules: ['phone']})
if (!check.result) {
callback(new Error(check.message))
} else {
callback()
}
}
// 验证号码格式以及不能为空
const CHECK_PHONE_NOTNULL = (rule, value, callback) => {
let check = this.$validate({label: '号码', value, rules: ['notnull', 'phone']})
if (!check.result) {
callback(new Error(check.message))
} else {
callback()
}
}
// 检测邮箱格式
const CHECK_EMAIL = (rule, value, callback) => {
let check = this.$validate({label: '邮箱', value, rules: ['email']})
if (!check.result) {
callback(new Error(check.message))
} else {
callback()
}
}
// 检测邮箱格式以及不能为空
const CHECK_EMAIL_NOTNULL = (rule, value, callback) => {
let check = this.$validate({label: '邮箱', value, rules: ['notnull', 'email']})
if (!check.result) {
callback(new Error(check.message))
} else {
callback()
}
}
return {
CHECK_PHONE,
CHECK_PHONE_NOTNULL,
CHECK_EMAIL,
CHECK_EMAIL_NOTNULL
}
},
methods: {
// 初始化验证数据
_initValidate (formInfo) {
const obj = {},
fieldList = formInfo.fieldList
// 循环字段列表
for (let item of fieldList) {
let type = item.type === 'select' ? '选择' : '输入'
if (item.required) {
if (item.validator) {
obj[item.value] = {
required: item.required,
validator: item.validator,
trigger: 'blur'
}
} else {
obj[item.value] = {
required: item.required,
message: '请' + type + item.label,
trigger: 'blur'
}
}
} else if (item.validator) {
obj[item.value] = {
validator: item.validator,
trigger: 'blur'
}
}
}
formInfo.rules = obj
}
}
}

最后

在项目的系统管理模块中可以看到示例代码:

项目地址

项目代码地址