vue中如何实现表单校验_vue 集合校验-优快云博客

该博客介绍了在前端开发中如何实现表单的详细验证，包括必填项检查和自定义的重复性校验。在`rules`对象中定义了校验规则，并在`el-form`组件上绑定。对于`name`、`code`和`description`字段，不仅有基本的非空验证，还添加了自定义的验证函数`validName`和`validCode`，确保权限名称和权限标识在当前父级权限下不重复。在编辑模式下，还会排除当前编辑的权限进行比对。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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