vue中如何实现 表单校验
1.在data中定义rules校验规则// 校验规则rules: {name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],description: [
·
1.在data中定义rules校验规则
// 校验规则
rules: {
name: [
{ required: true, message: '请输入权限名称', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入权限标识', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入权限描述', trigger: 'blur' }
]
}
2.el-form上绑定rules
3.表单每一项添加prop (这里的prop要跟rules定义的一样)
4.data中自定义校验规则
data() {
const validName = (rule, value, callback) => {
// 如果是编辑需要排除自己
let{ list } = this
const { formData, isEdit } = this
list = isEdit ? list.filter(item => item.id !== formData.id) : list
list.filter(item => item.pid * 1 === formData.pid).some(it => it.name.trim() === value.trim())
? callback(new Error(value + '重复了'))
: callback()
}
const validCode = (rule, value, callback) => {
let { list } = this
const { isEdit, formData } = this
list = isEdit ? list.filter(it => it.id !== formData.id) : list
list.map(it => it.code).includes(value)
? callback(new Error(value + '重复了'))
: callback()
}
return {
5.给表单校验规则添加validator属性
rules: {
name: [
{ required: true, message: '请输入权限名称', trigger: 'blur' },
+ { validator: validName, trigger: 'blur' }
],
code: [
{ required: true, message: '请输入权限标识', trigger: 'blur' },
+ { validator: validCode, trigger: 'blur' }
],
description: [
{ required: true, message: '请输入权限描述', trigger: 'blur' }
]
}
分析:
首先formdata中存储的信息中有当前的元素的pid
1.如果是编辑我需要排除自己
2.使用filter筛选出数组中pid相同的父级元素 这里数组中的每一项的id数字符串 而我表单里面存储的是数字型 所以这里进行一个转换 或者写==也可以
3.使用some判断数组是否有这个元素 如果有就抛出错误 没有就放行 这里数组中的数据传入的是有空格的所以使用trim进行去除两侧的空格(注意!)
更多推荐
已为社区贡献8条内容
所有评论(0)