验证表单时，当规则需要变化时，用计算属性实现

最新推荐文章于 2024-11-12 21:14:07 发布

Lao乾妈官方认证唯一女友:D

最新推荐文章于 2024-11-12 21:14:07 发布

阅读量95

点赞数

分类专栏： vue+antd+ts+less 文章标签： java 服务器数据库

本文链接：https://blog.csdn.net/qq_24385297/article/details/133143102

版权

vue+antd+ts+less 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

实现效果图：
在这里插入图片描述

const rules= computed(()=>{
        let obj = reactive({
        receiver: [{ required: true, message: "必选项" }],
        receiverMobile: [{ required: true, message: "", whitespace: true }]as any,
        receiverPhone: [{ required: true, message: "", whitespace: true }]as any,
        areaCode: [{ required: true, message: "必填项", type: "array" }],
        address: [
          { required: true, message: "必填项", whitespace: true },
          // { max: 30, message: '请在30个字符以内' }
        ],
        zipCode: [{ max: 6, message: "请输入正确的邮编" }],
      });
      // 所选的地区如果是国外（不含港澳台），则手机号码为非必填，电话号码为必填
      if(form.areaCode[0]==-30){
        obj.receiverPhone=[{ required: false, message: "", whitespace: true }]
        obj.receiverMobile=[{ required: true, message: "", whitespace: true },{validator:telRule}]
      }else{
      // 否则，则手机为必填，电话为非必填
      obj.receiverPhone=[{ required: true, message: "", whitespace: true },{validator:telRule}]
      obj.receiverMobile=[{ required: false, message: "", whitespace: true }]
      }
      return obj
      })