Bootstrap

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开头的数字,允许两位小数",
          }
        ],
}

;