el-select multiple表单校验问题

记录一个el-select复选框表单校验例子

1、一打开页面就会触发校验

解决方案:设置初始值为空数组

2、选中下拉数据,不会再次触发校验,导致提示文字一直存在

解决这个问题,首先先看看v-model 、prop属性、rules校验是否正确,这里注意el-select的rules校验的trigger应该是change。

如果以上都没问题,那么还有一个原因就是:嵌套太深,导致form检测不到ruleForm的变化

解决方案:

javascript 复制代码
 // 我这里用的是
      vulTypeChange() {
        this.form = { ...this.form }
      },

3、完没解决思路

1)添加form表单:rule方式验证

html 复制代码
<el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-bottom: 20px">
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收人" prop="receivers">
              <el-select v-model="form.receivers" placeholder="请选择接收人" filterable multiple clearable style="width: 100%" :disabled="this.disabled"
                >
                <el-option v-for="item in users" :key="item.userName" :label="item.nickName" :value="item.userName" />
              </el-select>
            </el-form-item>
          </el-col>
          
        </el-row>

      </el-form>
javascript 复制代码
rules: {
          
          receivers: [
            { required: true, validator: picValidator, trigger: 'change' },
          ]
         
        },

注意rule中验证方式应该是"change"

2)给下拉框添加change函数

html 复制代码
<el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-bottom: 20px">
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收人" prop="receivers">
              <el-select v-model="form.receivers" placeholder="请选择接收人" filterable multiple clearable style="width: 100%" :disabled="this.disabled"
                @change='vulTypeChange'>
                <el-option v-for="item in users" :key="item.userName" :label="item.nickName" :value="item.userName" />
              </el-select>
            </el-form-item>
          </el-col>
          
        </el-row>

      </el-form>

@change='vulTypeChange'

javascript 复制代码
vulTypeChange() {
        this.form = { ...this.form }
      },

3)自定义校验方法

javascript 复制代码
 data() {
      // 自定义验证规则
      var picValidator = (rule, value, callback) => {
        if (!this.form.receivers.length) {
          // 一定要写 callBack() 验证完成时调用的回调函数 https://github.com/yiminghe/async-validator
          callback(new Error('请至少选择一个接收人'))
        } else {
          callback()
        }
      }
      return {
。。。。

至此,完美解决el-select复选框表单校验

相关推荐
weixin_3993806911 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
rui锐rui30 分钟前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
伍哥的传说31 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥33 分钟前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript