[JavaScript知识库]vue项目如何实现自定义校验规则

1.data中定义rules校验规则

export defaut {
 data(){
   rules:{
     name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入权限描述', trigger: 'blur' }
        ]
       }
    }
}

2.el-form上绑定rules并且把:modle绑定数据项

 <el-form ref="ruleForm" label-width="100px" :model="formData" :rules="rules">

3.表单每一项添加prop

 <el-form ref="ruleForm" label-width="100px" :model="formData" :rules="rules">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
 </el-form>

4.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()
    }

?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' }
        ]
      }

?6.业务代码讲解

目标

?6-1 权限非重验证

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

首先formdata中存储的信息中有当前的元素的pid??

1.如果是编辑我需要排除自己??

2.使用filter筛选出数组中pid相同的父级元素 这里数组中的每一项的id数字符串 而我表单里面存储的是数字型 所以这里进行一个转换? 或者写==也可以?

3.使用some判断数组是否有这个元素? 如果有就抛出错误? 没有就放行? 这里数组中的数据传入的是有空格的所以使用trim进行去除两侧的空格

6-2 Code非重验证

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

代码思路差不多的? 上面我使用的some? 这里使用的是 map拿到数组中每一项 会返回一个由code组成的新数组? ?再使用icludes判断数中是否有该元素? 跟some的效果是一样的??