Vue form-item select option 自定义校验

Posted 2022-11-25 Eli Shaw

Vue 下拉框校验，判断如果选择的是默认第一个下拉框，则提示用户选择下拉框中的选项。在校验的时候有如下问题记录。

一、正确自定义校验下拉框源码如下

<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="secondTitle" :rules="rules" ref="secondTitleFrom" label-width="150px">
      <el-form-item label="上级标题：" prop="firstTitleId">
        <el-select v-model="secondTitle.firstTitleId" placeholder="请选择活动区域">
          <el-option
            v-for="item in selectFirstTitleList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

export default 
  data() 

    //自定义下拉框校验函数
    const isSelect = (rule, value, callback) => 
      if (value == 0)  //如果值是 0，提示用户选择正确的选项
        return callback(new Error("请正确选择一级标题"));
       else 
        callback();
      
    ;

    return 
      rules: 
        firstTitleId: [ required: true, trigger: "change", validator: isSelect ]
      
    ;
  

二、此处有以下几点需要注意

1.<el-form> 标签中的 :rules="rules" 值 rules 一定要与 return 中的 rules 值一致。可以起其它名称，但要保证名称完全相同。

2.<el-form-item> 标签中的 prop="firstTitleId" 值 firstTitleId 一定要与 <el-select> 标签中的 v-model="secondTitle.firstTitleId" 最后一个属性值一致。并且与 return 下 rules 中的 firstTitleId 名称一致。记住这三处的名称一定要完全一样，否则自定义校验函数中的 value 值是 undefined。

3.自定义检验函数中的 value 值最终拿到的是 <el-option> 标签中的 :value 值，此处我的 :value 值是 Number 类型，网上说有 Number 类型拿不到值的情况，在检验属性中添加 type:"number" 类型说明。我没有添加也可以正确使用，如果有问题可以添加如下代码试试：

return 
      rules: 
        firstTitleId: [ type: "number", required: true, trigger: "change", validator: isSelect ]
      
    ;