element rules校验,经常碰到表单校验时,根据状态或值不同 进行单个input的校验

220 阅读1分钟

当碰到表单校验,根据状态或值不同 进行单个或多个input的必填校验或者change校验 正常写法:

<el-row :gutter="24">
  <el-col :span="12">
    <el-form-item
    label="名称:"
    prop="name"
    >
      <el-input
      type="text"
      size="small"
      v-model="form.name"
      placeholder="请输入名称"
      maxlength="20"
      show-word-limit
      />
    </el-form-item>
  </el-col>
</el-row>

当我们根据某一状态的值改变,这时候不再需要name的校验的简单方式 例如当form.sex 的值是1 ,name的校验不需要,这时可以如下写法

<el-row :gutter="24">
  <el-col :span="12">
    <el-form-item
    label="名称:"
    :rules="form.sex ==  1 ? [] : rules.couponLimitAmount"
    >
      <el-input
      type="text"
      size="small"
      v-model="form.name"
      placeholder="请输入名称"
      maxlength="20"
      show-word-limit
      />
    </el-form-item>
  </el-col>
</el-row>