form表单 校验 至少必填一项 或者 按条件决定是否必填

1、至少必填一项

 <el-col :span="12" v-if="flag == 1 || flag == 3">
              <el-form-item label="7日年化收益" ref="sevenDay" :label-width="formLabelWidth" prop="seven">
                <el-input
                  style="width: 100%"
                  v-model="form.seven"
                  placeholder="请输入7日年化收益"
                  clearable
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="flag == 1 || flag == 3">
              <el-form-item label="3月年化收益" ref="threeMonth" :label-width="formLabelWidth" prop="three">
                <el-input
                  style="width: 100%"
                  v-model="form.three"
                  placeholder="请输入3月年化收益"
                  clearable
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="flag == 1 || flag == 3">
              <el-form-item label="6月年化收益" ref="sixMonth" :label-width="formLabelWidth" prop="six">
                <el-input
                  style="width: 100%"
                  v-model="form.six"
                  placeholder="请输入6月年化收益"
                  clearable
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="flag == 1 || flag == 3">
              <el-form-item label="一年年化收益" ref="ayear" :label-width="formLabelWidth" prop="oneYear">
                <el-input
                  style="width: 100%"
                  v-model="form.oneYear"
                  placeholder="请输入一年年化收益"
                  clearable
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
data() {
    var validateName = (rule, value, callback) => {
      if (!this.form.seven && !this.form.three && !this.form.six && !this.form.oneYear) {
        callback(new Error("请至少填写一项"))
      } else {
        //任意值被填写,清除验证提示
          this.$refs.sevenDay.clearValidate()
          this.$refs.threeMonth.clearValidate()
          this.$refs.sixMonth.clearValidate()
          this.$refs.ayear.clearValidate()
        callback()
      }
    }
rules: {
        seven: [
          { required: true, validator: validateName, trigger: "blur" },
          {
            pattern: /^(-)?(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,2})?$/,
            message: "仅支持0或不以0开头的数字,允许两位小数",
          }
        ],
        three: [
          { required: true, validator: validateName, trigger: "blur" },
          {
            pattern: /^(-)?(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,2})?$/,
            message: "仅支持0或不以0开头的数字,允许两位小数",
          }
        ],
        six: [
          { required: true, validator: validateName, trigger: "blur" },
          {
            pattern: /^(-)?(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,2})?$/,
            message: "仅支持0或不以0开头的数字,允许两位小数",
          }
        ],
        oneYear: [
          { required: true, validator: validateName, trigger: "blur" },
          {
            pattern: /^(-)?(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,2})?$/,
            message: "仅支持0或不以0开头的数字,允许两位小数",
          }
        ],
}

2、按条件决定是否必填

<el-form-item label="近一周涨幅" :label-width="formLabelWidth" prop="rangeWeek" :rules="currentM ? rules.rangeWeek : [{required: false}]">
                <el-input
                  style="width: 100%"
                  v-model="form.rangeWeek"
                  placeholder="请输入近一周涨幅"
                  clearable
                >
                </el-input>
              </el-form-item>

:rules="currentM ? rules.rangeWeek : [{required: false}]   是加在el-form-item上的

currentM是判断要不要必填的字段,true为必填,false为不必填。如果必填,使用rules里面的rangeWeek校验,如果不必填,设置当前required为fasle

rules:{
  rangeWeek: [
          { required: true, message: "请输入近一周涨幅", trigger: "blur" },
          {
            pattern: /^(-)?(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,2})?$/,
            message: "仅支持0或不以0开头的数字,允许两位小数",
          }
        ],
}

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值