m0_60877809 2021-12-08 15:41 采纳率: 72.7%
浏览 67
已结题

vue中el-form表单的动态校验问题


 <el-form-item
            class="form-item-invsStatus"
            label="开票时间:"
            prop="arbAdditionInfo.invsStatus"
          >
            <el-radio-group v-model="publishForm.arbAdditionInfo.invsStatus">
              <el-radio label="KQ">付款前开发票</el-radio>
              <el-radio label="KH">付款后开发票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            class="form-item-invsStatus"
            prop="arbAdditionInfo.invsDay"
         
            :rules="[{required:!this.invsDayShow,message:'请选择',trigger:'blur'}]"
          >
// 这里我想   :rules="[{required:!this.invsDayShow,      validator: validatePayAfterData,,trigger:'blur'}]"这样写 但是报错了 所以就用不到我自己写的校验规则了
            <!-- :class="{active: stepNum === index}" -->
            <div
              style="font-size: 14px"
              :style="{
                color:
                  publishForm.arbAdditionInfo.invsStatus == 'KH'
                    ? '#000'
                    : '#c0c4cc',
              }"
            >
              付款之日起【<el-input
                class="input-width-small"
                :disabled="this.invsDayShow"
                v-model="publishForm.arbAdditionInfo.invsDay"
                size="mini"
              ></el-input
              >】个工作日内开票
            </div>
          </el-form-item>


        "arbAdditionInfo.invsDay": [
          {
        
            validator: validatePayAfterData,
            trigger: ["blur", "change"],
          },
        ],

     var validatePayAfterData = (rule, value, callback) => {
      if (!value || isNaN(value) || value <= 0 || value > 30) {
        return callback(new Error("请输入 1 ~ 30之间日期"));
      } else {
        callback();
      }
    };

我通过动态来校验规则百度搜到了这种方法 但是只能校验到message这个方法 校验自己写的规则校验不到 直接写上去会报错 下面的是我自己写的规则 还有没有更好的方法

  • 写回答

2条回答 默认 最新

  • 许失之 2021-12-08 16:55
    关注

    校验函数是没有问题的,这边猜测是引用时候的问题,检查一下:

    1. 我看到注释中在validator参数后多了一个逗号;
    2. 这个校验函数要在html中直接调用的话,它首先需要是一个全局变量,this要能找到它,直接定义在data中或methods中都可以,类似:
    
    data() {
       return {
         validatePayAfterData: (rule, value, callback)=> {
          ......
          },
       }
    },
    

    或:

    methods: {
        validatePayAfterData(rule, value, callback) {
        ......
        },
      },
    

    直接放在data的rules中的话,也可以:
    那就是这样子:

     <el-form :model="publishForm" :rules="rules">
    
     data() {
        const validatePayAfterData = (rule, value, callback) => {
         .......
        };
        return {
          rules: {
            'arbAdditionInfo.invsDay': [{ validator: validDate, trigger: 'blur' }],
          },
        };
      },
    

    都是OK的,可以康康自己是哪里存在问题吼

    然后上面的代码里,html中的this需要去除一下应该,校验函数里的!value这个判断也可以省略~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月24日
  • 已采纳回答 2月16日
  • 创建了问题 12月8日

悬赏问题

  • ¥15 爬取豆瓣电影相关处理
  • ¥15 手机淘宝抓清除消息接口
  • ¥15 C#无selenium
  • ¥15 LD衰减计算的结果过大
  • ¥15 用机器学习方法帮助保险公司预测哪些是欺诈行为
  • ¥15 计算300m以内的LD衰减
  • ¥15 数据爬取,python
  • ¥15 怎么看 cst中一个面的功率分布图,请说明详细步骤。类似下图
  • ¥15 为什么我的pycharm无法用pyqt6的QtWebEngine
  • ¥15 FOR循环语句显示查询超过300S错误怎么办