Vue form-item select option 自定义校验

最新推荐文章于 2025-05-12 12:07:52 发布

Eli Shaw

最新推荐文章于 2025-05-12 12:07:52 发布

阅读量1.1w

点赞数 2

分类专栏： Vue 文章标签： Vue form-item select option 自定 Vue 下拉框自定义校验

本文链接：https://blog.youkuaiyun.com/xiaojinlai123/article/details/96103258

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

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 }]
      }
    };