el-form表单常见校验

最新推荐文章于 2024-04-02 18:17:12 发布

帝博格T－bag

最新推荐文章于 2024-04-02 18:17:12 发布

阅读量725

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/m0_37616866/article/details/130955624

版权

数字限制

customRule: [
	{
       validator: (rule, value, callback) => 
       callback(!/^[0-9]*$/.test(value) ? new Error('请输入数字') : undefined),
       trigger: 'blur'
    },
]
customRule: [
      { required: true, message: '请填写人数', trigger: 'blur' },
      { 
        pattern: /^([1-9]|10)$/,
        message: '请输入1-10的整数',
        trigger: ['blur', 'change'] 
      },
 ]
customRule: [
     { 
        pattern: /^[1-9]\d*$/,
        message: '请输入大于0的整数',
        trigger: ['blur', 'change'] 
      },
]

中国大陆手机号

customRule: [
   { 
      pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: ['blur', 'change'] 
    }
]

长度限制

customRule: [
     { pattern: /^.{0,300}$/, message: '最多只能输入300个字符', trigger: 'blur' }
]
customRule: [
      { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
]

下拉框选中校验

 {
    prop: 'serviceTags',
    label: '文档类别',
    type: 'select',
    colSpan: 24,
    customRule: [
      { required: true, validator: serviceTagsValidator, trigger: ['blur', 'change'] }
    ],
    slot: 'serviceTags'
 },

// 自定义文档类别校验规则
const serviceTagsValidator = (rule, value, callback) => {
  let flag = false
  value.forEach(item => {
    if (item.checked) {
      flag = true
    }
  })
  callback(flag ? undefined : new Error('请选择文档类别标签'))
}

起止日期前后校验

customRule: [
      {
        validator: (rule, value, callback) => {
          if (value && formData.overDate) {
            if (value > formData.overDate) {
              callback(new Error('签发日期不能大于到期日期'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        },
        trigger: ['change', 'blur']
      }
    ]

必填项校验

customRule: [
      { required: true, message: '请选择通信区域', trigger: 'change' }
    ],

表单有列表提交时，防止重名校验

certType: [
    { required: true, message: '请选择签证名称', trigger: [ 'change'] },
    {
      validator: (rule, value, callback) => {
        const priorities = planList.list.map(item => item.certType)
        let count = 0
        priorities.filter(item => {
          if (item === value) {
            count++
          }
        })
        if (count > 1) {
          callback(new Error('不能有重复的签证名称'))
        } else {
          callback()
        }
      }
    }
  ],

表单有列表提交时，校验当前行的开始日期和结束日期

issueDate: [
    { required: true, message: '请选择签发日期', trigger: ['change'] },
    {
      validator: (rule, value, callback) => {
        let index = rule.field.split('[')[1].split(']')[0]
        if (value && planList.list[index].overDate) {
          if (proxy.$moment(value).isAfter(proxy.$moment(planList.list[index].overDate)) ) {
            callback(new Error('签发日期不能大于到期日期'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      },
      trigger: ['change', 'blur']
    }
  ],