vue中如何实现 表单校验

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进行去除两侧的空格(注意！)