Skip to content

程序员日志

  • Current Page Parent 应用笔记
  • Current Page Parent 经验分享
  • 系列教程
  • 代码片段
  • 参考手册
  • 信创环境
  • 开源分享
  • 软件推荐
  • 网址收藏
  • Current Page Parent 应用笔记
  • Current Page Parent 经验分享
  • 系列教程
  • 代码片段
  • 参考手册
  • 信创环境
  • 开源分享
  • 软件推荐
  • 网址收藏
应用笔记 / 经验分享

Vue3 自定义FormRule表单校验规则

  • Avatar photo
  • 2023年9月5日

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//表单校验规则
rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { validator: validName, trigger: 'blur' } //自定义扩展校验规则
        ],
        code: [
          { validator: validCode, trigger: 'blur' } //自定义校验规则
        ]
      }
 
//自定义校验回调函数
//校验失败返回 callback('错误信息')
//校验成功 callback()
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()
}

 

Tags: JavaScriptVUE前端

You may also like...

  • Micro SD/TF卡SPI模式驱动的实现

    Micro SD/TF卡SPI模式驱动的实现

  • k型、N型、J型、E型、T型等热电偶的区别和特点

  • Solved: npm ERR! request to xxxxx failed, reason: certificate has expired

    Solved: npm ERR! request to xxxxx failed, reason: certificate has expired

程序员日志 © 2025. All Rights Reserved.

Powered by WordPress. Theme by Alx.