iview 输入框_使用iview框架,如何进行输入框或者按钮的关联验证

iview框架的Form 组件基于 async-validator 实现数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。

简单的验证

北京

上海

深圳

提交

重置

export default{

data () {return{

formValidate: {

name:'',

mail:'',

city:'',

gender:'',

interest: [],desc:''},

ruleValidate: {

name: [

{ required:true, message: '不能为空', trigger: 'blur'}

],

mail: [

{ required:true, message: '邮箱不能为空', trigger: 'blur'},

{ type:'email', message: '格式错误', trigger: 'blur'}

],

city: [

{ required:true, message: '请选择城市', trigger: 'change'}

],

gender: [

{ required:true, message: '请选择性别', trigger: 'change'}

],

interest: [

{ required:true, type: 'array', min: 1, message: '请选择兴趣爱好', trigger: 'change'},

{ type:'array', max: 2, message: '最多选择两项', trigger: 'change'}

],desc: [

{ required:true, message: '请输入个人简介', trigger: 'blur'},

{ type:'string', min: 20, message: '不能少于20个字符', trigger: 'blur'}

]

}

}

},

methods: {

handleSubmit (name) {this.$refs[name].validate((valid) =>{if(valid) {

//验证成功后执行的方法}else{

//验证失败后执行的方法}

})

},

handleReset (name) {this.$refs[name].resetFields();

}

}

}

下面是两个输入框之间关联的例子,就拿最近做的一个项目举例吧,async-validator有一个字段validator,可以自定义验证规则

let checkc7 = (rule, value, callback) => {

let c7 = parseFloat(this.formRecord.c7)

if (c7 < (c6 * 0.95)) {

callback("实测制冷量不应小于额定制冷量的95%")

} else {

callback()

}

}

ruleRecord:{

c6: [

{

required:true,

message:'不能为空'}

],

c7: [

{

required:true,

message:'不能为空'},

{

validator: checkc7,

trigger:'blur'}

]

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/505952.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为荣耀v20是android10,荣耀V20和荣耀V10买哪个好

随着华为NOVA 4的发布&#xff0c;接下来要期待的就是荣耀V20了。从目前曝光的信息来看&#xff0c;这款手机确实憋了不少大招&#xff0c;而且比华为NOVA 4更好的一点是它搭载的是麒麟980处理器&#xff0c;至于它的价格应该会与华为NOVA 4相近。虽然荣耀V20很诱人&#xff0c…

git配置全局用户名和密码_还在手动打包,手动传jar包?那你确实应该学一下jekins配置了...

本文为小编原创文章&#xff0c;首发于Java识堂微信公众号&#xff0c;一个高原创&#xff0c;高收藏的公众号&#xff0c;转载请联系作者先说jekins能干啥&#xff0c;你把代码放到git上&#xff0c;jekins就能帮你编译代码&#xff0c;并且把jar包放到相应的服务器上&#xf…

data 谷歌浏览器更改user 路径_Chrome浏览器自定义设置个人信息存储路径

序言Chrome浏览器很好用&#xff0c;感觉也很快&#xff0c;但是&#xff0c;也是有那么几个小瑕疵的。例如&#xff0c;Chrome浏览器无法设置安装路径&#xff0c;只能安装在默认的C盘&#xff0c;个人信息默认放在C盘&#xff0c;详细路径如下&#xff1a;对于我这种对C盘有洁…

android progressdialog 样式,android之修改系统自带ProgressDialog样式

1.ProgressDialog默认样式是当前Activity的theme所定义的ProgressDialog样式。继承自父类AlertDialog的style.AlertDialog的源码static int resolveDialogTheme(Context context, int resid) {if (resid THEME_TRADITIONAL) {return com.android.internal.R.style.Theme_Dialo…

python图片横向合并_[宜配屋]听图阁

起因&#xff1a; 有一批数据需要每个月进行分析&#xff0c;数据存储在excel中&#xff0c;行标题一致&#xff0c;需要横向合并进行分析。 数据示意&#xff1a;具有多个代码&#xff1a; # -*- coding: utf-8 -*- """ Created on Sun Nov 12 11:19:03 2017 a…

微信小程序是否有路由拦截_微信小程序--路由拦截器

背景由于最近公司要求开发小程序,一直很感兴趣,也是趁着这次机会,边文档边开发,遇到一些好玩的东西,留此作为笔记介绍在开发小程序,构建路由时,因为需要权限判断,最常见的就是在路由跳转时判断用户是否有权限访问或使用该功能,而在官网找了很久也没有看到,诸如 vue-router 的 b…

vue项目android,Android与Vue项目交互

1. Android代码class MainActivity : AppCompatActivity() {private lateinit var callJSBtn: Buttonprivate lateinit var webView: WebViewprivate var ajObject: AjObject AjObject()override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceSt…

updatebyprimarykeyselective返回什么是成功_嫦娥五号发射升空成功!!!

嫦娥五号探测器发射成功1聚焦发射当时2020年11月24日4时30分&#xff0c;我国在中国文昌航天发射场&#xff0c;用长征五号遥五运载火箭成功发射探月工程嫦娥五号探测器&#xff0c;火箭飞行约2200秒后&#xff0c;顺利将探测器送入预定轨道&#xff0c;开启我国首次地外天体采…

基于php的外卖订餐系统开题报告_订餐系统开题报告.doc

订餐系统开题报告订餐系统开题报告附件6&#xff1a;广东工商职业学院毕业设计(论 文)开题报告题目校园订餐系统设计与实现系 (部)计算机应用技术系专业班级姓名学号指导老师2015年10月30日毕业设计(论文)开题报告题目校园订餐系统设计与实现时间2015年10月30日至2015年11月10日…

荣耀v40搭载鸿蒙吗,荣耀V40照常发布,将更换操作系统,同nova8搭载鸿蒙2.0发布...

荣耀系列手机的发布节奏有一定程度的变动&#xff0c;例如荣耀Magic3发布推迟&#xff0c;但是根据消息称&#xff0c;荣耀V40还会照常发布。根据目前华为内部关于麒麟9000的分配来看&#xff0c;主要还是对Mate40和P40使用&#xff0c;其他型号中&#xff1a;nova8 Pro 、荣耀…

chrome java插件_Java程序员喜欢的10款软件里有你在用的吗?

作为一名Java程序员&#xff0c;日常开发的过程中&#xff0c;我们需要借助很多工具来进行编码。好的工具可以极大的提升程序员的工作效率&#xff0c;今天我们来认识下大多数程序员喜欢的10款软件。持不同意见或有想要补充的小伙伴&#xff0c;欢迎评论区交流哦~VSCODE不管你是…

transmac使用方法_Mac苹果电脑降级方法?

最近Mac OS升级到最新系统(Catalina 10.15 19A583)后&#xff0c;出现了各种奇葩问题&#xff0c;更关键的是&#xff0c;很多常用(专业)软件不能使用了&#xff0c;这让大家真的是焦头烂额。如果你笔记本电脑能够正常联网其实&#xff0c;Mac系统本身是提供了一个快速恢复系统…

android 网络连接 网络是否可用,Android 使用ping判断网络/WIFI连接是否可用

最近项目中有一个网络判断的需求&#xff0c;因为终端只能连接wifi&#xff0c;wifi即使连接上也可能会出现不能连接网络的问题&#xff0c;所以需要进行网络连接的判断。ping的相关知识使用ping检验网络是否可以连接ping就是检测客户端是否可以上网。那么我们就上代码该段代码…

android 富文本框架_当微擎框架遇上uniapp,以一当十同时开发十个平台项目

随着各类平台异军突起&#xff0c;流量也越来越分散。为了适应时代的发展&#xff0c;不少公司在做产品项目的时候&#xff0c;需要例如网站、公众号、H5、微信小程序、抖音小程序、支付宝小程序、百度小程序、360小程序、快应用、安卓app、苹果app的需求。这么多平台&#xff…

mesh 协调器 路由器_关于Mesh网络中,协调器和路由器之间的几个问题?

1&#xff0c;由于我所搭建的整个网络是Mesh网络&#xff0c;不牵涉到低功耗的情况&#xff0c;所以网络中只有两种类型的设备&#xff1a;协调器和路由器即&#xff1a;1个协调器N个路由器2&#xff0c;为了防止协调器在掉电的情况下路由器去维持整个网络&#xff0c;这样协调…

html5写入唯一标识,id - 唯一标识符 - html5全局属性

idid全局属性定义唯一标识符(ID)&#xff0c;该标识符在整个文档中必须是唯一的。其目的是在链接(使用片段标识符)&#xff0c;脚本或样式(使用CSS)时标识元素。示例A normal, boring paragraph. Try not to fall asleep.The most exciting paragraph on the page. One of a ki…

python 文本相似度_【机器学习】使用gensim 的 doc2vec 实现文本相似度检测

环境 Python3&#xff0c; gensim&#xff0c;jieba&#xff0c;numpy &#xff0c;pandas 原理&#xff1a;文章转成向量&#xff0c;然后在计算两个向量的余弦值。 Gensim gensim是一个python的自然语言处理库&#xff0c;能够将文档根据TF-IDF, LDA, LSI 等模型转化成向量模…

list的exc_集合框架

List是有序的Collection&#xff0c;使用此接口能够精确的控制每一个元素的插入位置&#xff0c;及使用索引访问List中的元素&#xff0c;List存储元素是有序的、可重复。除了具备Collection接口必备的Iterator()方法外&#xff0c;List还提供了listIterator()方法返回一个List…

html鼠标经过的特效代码,使用mouse事件实现简单的鼠标经过特效

代码超级简单&#xff0c;这里就不多BB了&#xff0c;直接奉上Documentbody,ul,li{margin:0; padding:0; list-style:none}ul li{width:100px; height:100px; border:1px solid #f00; float:left; margin:50px 10px; background-color:#ffffff;}ul li.current{border:1px solid…

ubuntu tomcat上传目录权限_等了 3 年,Ubuntu Studio 终于有权限上传更新包

Ubuntu 的衍生版本 Ubuntu Studio 终于选出了两位具有上传更新包权限的开发者。此前就有媒体报导过&#xff0c;Ubuntu Studio 19.04 版本可能会流产&#xff0c;而原因很让人诧异&#xff1a;社区里没有任何一位开发者具有上传更新包的权限。随后 Ubuntu Studio 委员会主席 Er…