[后台系统]element plus自定义表单规则时，不执行 validate校验

小冰鸡

于 2022-03-07 20:38:05 发布

阅读量2k

点赞数 2

分类专栏： JavaScript 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_41228905/article/details/123336744

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue3项目中，使用ElementPlus进行表单验证时自定义规则的方法。关键在于无论校验结果如何，都必须调用callback函数来触发Element的validate流程。示例中展示了数字校验规则的实现，并详细说明了自定义规则的声明和使用方式。

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

使用技术为vue3+element plus，以下内容为个人理解，如有错误请指正。

解决办法

在自定义规则方法中，不管判定成功或者失败，都需要去调用callback，否则不执行element的validate表单校验。

      // 数字校验规则
      const numberRule = (rule, value, callback) => {
        const num = Number(value)
        if (!isNaN(num) && num > 0 && value.length < 6) {
          return callback() //问题所在
        }
        return callback(new Error('请输入1~5位数字'))
      }

自定义校验规则的使用

在rules中:

rules: {
    [规则名称]: [
        required: true,   //设为必填项
        trigger: 'blur',   //控件失焦时触发
        validator: [自定义规则方法名],   //设置自定义规则校验
    ]
}

在方法中:

const [规则方法名] = (rule, value, callback) => {
    if(判断条件){
        //校验代码块
        return callback()   //调用回调函数，才会执行element组件的validate表单校验
    }
    return callback(new Error('控件下方红色小字提示信息'))
}