elementUI 级联选择框 表单验证
今天遇到了一个需求:进行级联选择框的表单验证,突然有点懵逼。感觉应该和正常的表单验证类似,但不是很清晰,后来还是在博客园找到了相关参考文章。
先上代码:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="选择分类" prop="sorts">
<el-cascader
:options="options"
change-on-select
filterable
v-model="ruleForm.sorts"
clearable></el-cascader>
</el-form-item>
</el-form>
data() {
/*表单验证*/
ruleForm: {
sorts: '',
},
/*验证规则*/
rules: {
sorts: [
{ type: 'arary', required: true, message: '请选择分类', trigger: 'change'}
],
}
}
实际上看上面的代码和表单验证并无太大区别,只是将 el-table-item
里面的 el-input
标签换成了 el-cascader
,其表单验证以及规则都是相似的。
需要注意的是:
级联选择框验证规则的触发事件是
change
事件,当级联选择器的内容发生变化时会触发验证。如果验证无法生效,首先需要检查 prop 是否绑定了表单的验证规则,以及
el-cascader
里面的v-model
是否绑定了表单验证属性;然后由于级联选择器选中的内容是以数组的形式存在,要注意 设置验证规则里面的type
值为array
。
参考文章:https://www.cnblogs.com/fur-mat/p/11984242.html
elementUI 级联选择框 表单验证的更多相关文章
- ElementUI 级联选择框 设置最后一级可选及相关问题解决
在使用 elementUI 的 el-cascader 级联选择框进行省市联动效果时,有这么一个需求:该级联选择框一共有三级结构分别为国家-省份-城市,国家和省份为必选项,城市为可选项.具体实现如下: ...
- 有关使用 iview 表单验证的问题
Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...
- element-ui设置级联选择器表单验证
data(){<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lab ...
- atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl窗体身份验证规则
atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...
- element-ui+vuex共享自定义方法进行表单验证 validator
element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...
- element-ui Form表单验证
element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索, ...
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- bootstrap-table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.s ...
- 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件
模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...
随机推荐
- CPU明明8个核,网卡为啥拼命折腾一号核?
中断机制 我是CPU一号车间的阿Q,我又来了! 我们日常的工作就是不断执行代码指令,不过这看似简单的工作背后其实也并不轻松. 咱不能闷着头啥也不管一个劲的只管执行代码,还得和连接在主板上的其他单位打交 ...
- cookie和session及token
cookie,session傻傻分不清楚? 做了这么多年测试,还是分不清什么是cookie,什么是session?很正常,很多初级开发工程师可能到现在都搞不清什么是session,cookie相对来说 ...
- 个人作业——软件工程实践总结&个人技术博客
一. 回望 (1)对比开篇博客你对课程目标和期待,"希望通过实践锻炼,增强软件工程专业的能力和就业竞争力",对比目前的所学所练所得,在哪些方面达到了你的期待和目标,哪些方面还存在哪 ...
- Python 简明教程 --- 14,Python 数据结构进阶
微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 如果你发现特殊情况太多,那很可能是用错算法了. -- Carig Zerouni 目录 前几节我们介 ...
- 手摸手带你理解Vue的Computed原理
前言 computed 在 Vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利.那么本文就来带大家全面理解 computed 的内部原理以及工作流程. 在这之前,希望你能 ...
- Java是如何实现Future模式的?万字详解!
JDK1.8源码分析项目(中文注释)Github地址: https://github.com/yuanmabiji/jdk1.8-sourcecode-blogs 1 Future是什么? 先举个例子 ...
- CImage显示位图与CDC双缓冲冲突,使用路径层解决.
2010年04月29日 星期四 20:35 位图闪的问题困扰我很久了,因为程序的需要,我显示位图的方式是CImage类. 如果从CImage转到CBitmap,之后使用Attach到是可以,但我发现这 ...
- 1、Pycharm中创建项目自动生成头信息
1.打开PyCharm 选择File-Settings 2.模块变量描述,并且重新创建一个.py的文件测试,检测是否自动生成头信息
- 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题
IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...
- 前端同学经常忽视的一个 JavaScript 面试题
题目 function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = funct ...