使用elementUI的form表单和Steps步骤条如何让rules分步骤校验

已于 2023-09-28 01:15:15 修改
阅读量512 收藏
点赞数
分类专栏： vue 文章标签： elementui vue
于 2023-09-28 01:13:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42947972/article/details/133367259
版权

使用rules如何分步骤校验

一般如果我们使用form表单的时候都会用到rules来进行校验,那么如果加上步骤的应该如何校验呢?
在这里插入图片描述
我使用的方式是通过active
我们步骤1的时候 active是0, 步骤2的时候active是1
那我们在进行校验步骤1可以这样子写:

 :prop="active === 0 ? 'title' : '' "

在进行校验步骤2可以这样子写:

 :prop="active === 1 ? 'cover' : '' "

这样就可以解决表单分步骤校验啦

三浪.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui步骤条实现部分验证，单个elform
dongte1231的博客
06-17 1802
需求：整个表单是一个单页面，页面上要加入el-steps步骤条，当前步骤填写完成后，点击下一步则进行当前步骤的验证，验证成功才能进入下一个步骤的填写，因为整个el-form是在el-steps外部，只能使用el的部分验证validateField 思路，在下一步按钮方法上，添加当前步骤需要验证的字段名参数arr，通过循环校验当前字段 arr内容如下： data() { return { arr:['field133','field134'], } } valid方法如下： metho
Element-UI组件之表单Form
TwentyOne__的博客
07-03 5465
Element-UI组件之表单FormRadio 单选框基础用法禁用状态单选框组按钮样式带有边框Checkbox 多选框基础用法禁用状态多选框组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可清空密码框带 icon 的输入框文本域可自适应文本高度的文本域复合型输入框尺寸带输入建议自定义模板远程搜索输入长度限制 Radio 单选框 基础用法 &...
Element Ui使用技巧——Form表单的校验规则rules详细说明
zhouxianguang的专栏
09-20 1万+
逍遥云天 Element Ui使用技巧——Form表单的校验规则rules详细说明 Element UI中对Form表单验证的使用介绍： Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item的 prop 属性设置为需校验的字段名即可。校验规则参见async-validator 文档中提及的用法有2种： 1.对整个表单进行规则验证： <el-form :model="ruleForm" status-icon :rules="r.
Vue进阶（贰零壹）：el-steps 实现页面内导航
最新发布
2401_85124192的博客
06-19 758
下面重点介绍el-steps的directionspaceactive属性，如下:通过查看Element手册，需要定宽的步骤条时，设置space属性即可，单位为px，如果不设置为自适应（若不确定步骤条中每一步骤中内容高度或宽度，可设置为自适应；为使界面美观，可修改el-stepimportant;important;important;el-step属性如下图所示：这里重点介绍下如何应用el-steps动态展示所需信息。
element的步骤条整合表单（steps+form）
热门推荐
suqinyi的博客
05-12 1万+
先上效果图： element ui 组件库官网 使用步骤： 1、页面组合步骤 ==> 5步 定义出4个步骤（看你自己需要几步） 定义form表单 定义4个盒子对象active属性 => 1 到 4 放置表单项 设置上一步和下一步的按钮 <template> //第一步:定义出4个步骤 <el-steps :active="active" finish-status="success"> <el-step title="第一步" />
一招教你学会element-ui的表单验证
h周杰偷的博客
07-21 574
ElementUI表单验证 ElementUI的表单验证借助了async-validator，该模块内置了很多原生类型的验证，如： string, number等相关类型 给el-form绑定model属性 <template> <el-form :model="formData"></el-form> </template> <script> export default { data () { return {
ElementUi Steps 步骤条的使用
MrWangisgoodboy的博客
06-23 8267
ElementUi Steps 步骤条的使用
vue项目中使用Element多个Form表单同时验证
航仔的博客
01-23 2194
在项目中一个页面中需要实现多个Form表单，并在页面提交时需要对多个Form表单进行校验，多个表单都校验成功时才能提交。两个form表单，每个表单上都设置单独的model和ref，不能同时使用，否则每个表单上的校验提示会失效。
vue表单提交数组_VUE做出带有数据收集、校验和提交功能表单
weixin_39712865的博客
12-21 1320
这次给大家带来VUE做出带有数据收集、校验和提交功能表单，VUE做出带有数据收集、校验和提交功能表单的注意事项有哪些，下面就是实战案例，一起来看一下。示例https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg安装npm install form-createORgit clone https://gi...
vue动态生成下拉框_使用Vue动态生成form表单
weixin_39861920的博客
12-19 1557
form-create 表单生成器具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。如果对您有帮助，您可以在Github点右上角 "Star" 支持一下 谢谢！示例1.2 版本重大更新内部结构优化新增 规则生成器$formCreat...
createform用法_GitHub - fengzhongye/form-create: 使用ivew动态创建form表单/use iview create form...
weixin_42513365的博客
01-14 846
form-create使用iview动态创建form表单具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能。1.1版本重大更新内部重构新增 省市区三级联动组件新增 组件事件扩展优化 文件上传,时间选择等组件待完善动态显示隐藏表单动态增加表单树形控件生成示例安装npm install form-...
element组件---Form
weixin_45343878的博客
08-07 1030
Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框...
ElementUI的弹窗实现步骤条，步骤1，步骤二
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
04-23 3691
使用组件 el-steps,里面有上一步和下下一步的方法 控制组件 的显示v-show 或者v-if 在他们的方法里面改变显示的状态 点击一下一步切换显示的表单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="static/css/admin.css" rel="stylesheet" t.
ElementUI同一个表单部分验证和全部验证
qq_36577625的博客
05-21 1337
功能点： 1、点击“获取验证码”对上面3个input进行验证 2、点击确定对整个表单进行验证 // 获取验证码 getCode() { this.disableGetCode = true; const p1 = new Promise(resolve => { this.$refs["form"].validateField("orgid", err => { resolve(err); }); .
elementui el-step步骤条组件渲染顺序、序号错乱、状态错乱问题
DarlingYL的博客
12-06 4044
elementui el-step步骤条组件渲染顺序、序号错乱、状态错乱问题
element Steps 含状态步骤条及单步执行事件处理
YYDataV的博客
08-07 1576
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。每一步骤显示出该步骤的状态。 JS 代码
ElementUi中步骤条el-steps的使用
七七的博客
02-16 2002
ElementUi中步骤条el-steps的使用。
使用antdDesignPro创建分步表单
qq_35191010的博客
04-03 1575
antdesignPro中的分布表单 自定义按钮
element-ui中Steps步骤条和Tabs标签页关联
向天再借十万根
12-06 3952
步骤条和标签页的简单关联 1.步骤条： 步骤条的acitve属性用来设置当前激活的步骤，类型为number <el-steps :active="stepsActive" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3">&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值