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