element-ui form表单的动态rules校验功能实现

 更新时间:2023年07月26日 09:55:40   作者:史上最菜开发  
在vue项目中,有时候可能会用到element-ui form表单的动态rules校验,这篇文章主要介绍了element-ui form表单的动态rules校验,我们可以巧妙的运用element-ui form表单里面form-item的校验规则来处理,本文结合实例代码介绍的非常详细,需要的朋友可以参考下

element-ui form表单的动态rules校验

在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。

上代码:

<el-form-item
          label="3、属于以下何种优先配售类型(单选,符合以下条件之一即属于优先配售范围)"
          prop="yxpslx"
          :rules="sqyxForm.jtpslx == '0' ? { required: true, message: '请选择', trigger: 'change'} : {}"
          label-width="600px"
          style="display:flex; flex-direction: column;"
          class="elformitem3"
        >
          <el-radio-group v-model="sqyxForm.yxpslx" :disabled="sqyxForm.jtpslx ==1" @change="changeYxpsRadio">
            <el-radio label="0" class="mb10" :disabled="sqyxForm.jtsgry == '0' && sqyxForm.jtpslx == '0'">A.夫妻双方均符合共有产权住房申购条件且共同申购</el-radio
            ><br />
            <el-radio label="1" class="mb10" :disabled="sqyxForm.jtsgry == 1">B.港澳青年</el-radio>
            <br />
            <el-radio label="2" class="mb10" :disabled="sqyxForm.jtsgry == 1">C.二孩以上家庭</el-radio>
            <br />
            <el-radio label="3" :disabled="sqyxForm.jtsgry == 1">D.经区政府批准的优先保障对象</el-radio>
          </el-radio-group>
        </el-form-item>

重点是这个: :rules=“sqyxForm.jtpslx == ‘0’ ? { required: true, message: ‘请选择’, trigger: ‘change’} : {}”sqyxForm.jtpslx == ‘0’ 这个是我上面的选项来动态显示或者禁用的,当禁用的时候,就不校验!!!

vue elementui el-form rules动态验证

一、介绍

简介:在使用elementUI el-form 中,对于业务不同的时候可能会产生不同表单结构,但是都是存在同一个表单控件el-form中。

图片介绍:

1、在用户选择单选或多选时会有A,B,C,D,E五个选项

2、在用户选择简答题时只会题干,答案以及解析选项(主要是通过v-if来进行判断)

问题引入:当用户选择不同的题库时会产生不同的form表单选项,这个时候在进行表单提交验证的时候就需要根据不同试题类型进行判断,这个时候就需要两个rules来动态进行表单校验。

解决方法:在页面加载的时候在computed方法中进行动态判断直接返回赋值。

代码介绍:

// elementui信息
<el-form :model="addQueTable" ref="addQueTable" :rules="addQueRulesList">
<el-form>
// data中定义rules
updateQusRulesSel:[];
updateQusRules:[];
// computed方法
computed: {
// this.updateQusTable.showSelect自己定义的标识
    updateQusRulesList: function() {
        if (this.updateQusTable.showSelect) {
		    return this.updateQusRulesSel;
	    } else {
		    return this.updateQusRules;
    }
}

总结:在computed中进行值绑定,当该表单显示的时候就会触发(一开始是隐藏的),如果一开始页面加载的时候就触发会无法进行值判断,从而报错。其实能解决问题,通过该种方法。

二、最简单解决方法

在el-form中定义的rules检验字段,如果你的rules中有字段通过v-if进行隐藏,rules是不会对隐藏的字段选项进行判断,只要定义一个完整的rules就行,v-if隐藏的部分不会进入校验方法中。

把简单的问题复杂化了!!!!!

感谢该用户:

到此这篇关于element-ui form表单的动态rules校验的文章就介绍到这了,更多相关element-ui动态rules校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中的事件触发(emit)及监听(on)问题

    vue中的事件触发(emit)及监听(on)问题

    这篇文章主要介绍了vue中的事件触发(emit)及监听(on)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue如何动态加载组件详解

    vue如何动态加载组件详解

    组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要给大家介绍了关于vue如何动态加载组件的相关资料,需要的朋友可以参考下
    2022-10-10
  • 安装vue-cli的简易过程

    安装vue-cli的简易过程

    安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。接下来通过本文给大家介绍安装vue-cli的简易过程,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • vue实现密码显示与隐藏按钮的自定义组件功能

    vue实现密码显示与隐藏按钮的自定义组件功能

    本文通过两种思路给大家介绍vue实现密码显示与隐藏按钮的自定义组件功能,感兴趣的朋友跟随小编一起看看吧
    2019-04-04
  • 一文详解vue生命周期在uniapp中的用法

    一文详解vue生命周期在uniapp中的用法

    在uniapp中,vue的生命周期的用法基本都得以保留,但是对于特殊的需求以及特殊的情况,uniapp还引入了一些特有的生命周期钩子,本文给大家详细介绍了vue生命周期在uniapp中的用法,感兴趣的朋友可以参考下
    2024-01-01
  • 深入了解Vue中单向数据流的原理与管理

    深入了解Vue中单向数据流的原理与管理

    在Vue中,数据流是指数据的传递和管理方式,而Vue采用的是单向数据流,所以这篇文章就来就来和大家讲讲什么是Vue的数据流以及如何进行数据流管理,感兴趣的可以了解一下
    2023-06-06
  • vue-cli设置publicPath小记

    vue-cli设置publicPath小记

    这篇文章主要介绍了vue-cli设置publicPath小记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • elementui时间/日期选择器选择禁用当前之前(之后)时间代码实例

    elementui时间/日期选择器选择禁用当前之前(之后)时间代码实例

    当我们在进行网页开发时,通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于elementui时间/日期选择器选择禁用当前之前(之后)时间的相关资料,需要的朋友可以参考下
    2024-02-02
  • Vue中$router和$route的区别详解

    Vue中$router和$route的区别详解

    在 Vue.js 中,$router 和 $route 是两个常用的对象,用于处理路由相关的操作,下面小编就来和大家介绍一下$router 和 $route 的区别以及如何使用它们吧
    2023-06-06
  • vue用ant design中table表格,点击某行时触发的事件操作

    vue用ant design中table表格,点击某行时触发的事件操作

    这篇文章主要介绍了vue用ant design中table表格,点击某行时触发的事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论