vux中表单验证,在提交时自动聚焦到未验证通过的那栏;及循环表单的验证
首先vux中的表单验证在点击触发,失焦时才显示错误信息,如果不管它,它就没反应,这显然是不合理的;解决办法就是:在提交时做验证,不通过的话就使用.focus()及.blur()方法给它聚焦,失焦。
if(this.phone == ''){
this.$refs.phone.focus()//调起vux中的验证
this.$refs.phone.blur() }
注意:用vux组件时,选取DOM一定要用ref,不能用document,getElementById().
如果是多个表单需要同时验证,需要循环遍历每个项。
这里使用:ref=" 'item' +index",来动态表示每个输入框的dom;在验证时,需先遍历该表单数组;
var res = this.cardForms.iopReceivableDetailCash
for(var i = 0; i < res.length; i++){
if(this.$refs['phone'+ i][0].currentValue == '' || this.$refs['phone'+ i][0].currentValue == undefined){ //非空验证
this.$refs['phone'+ i][0].focus()
this.$refs['phone'+ i][0].blur()
}
}
currentValue是输入框中的值,可以打印this.$refs['phone']看看,是个数组且只有一个值,所以选取[0]。
vux中表单验证,在提交时自动聚焦到未验证通过的那栏;及循环表单的验证的更多相关文章
- el-mement表单校验-校验失败时自动聚焦到失败的input框
思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...
- 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- form表单Get方式提交时,action中带参数传递不了
<form action="getPostServlet/getPost.do?param4=param4" method="get"> <i ...
- js的作用是临时修改 表单Action提交的地址,因为 又有新的动作需要把表单参数提交到 新的servlet中,这点很重要
JavaScript可以临时修稿 form表单的提交地址
- 表单提交数据量大于2m,java 后台接受不到表单传递过来的数据
一般来说 post请求提交的数据无大小限制,但是tomcat 设置默认的表单传输数据大小不能2m,这时候当数据大于2m后台接收达不到表单的数据,需要修改tomcat的server.xml的的maxPo ...
- springcloud +spring security多种验证方式之第三方token生成自己的token通过校验和自己的表单验证大体流程
步骤: 1.继承 WebSecurityConfigurerAdapter.class,其中使用两个过滤器,一个spring scurity自带的UsernamePasswordAuthenticat ...
- angular1 表单验证demo
这是一个angular1 验证表单的小栗子: 先看代码: <div ng-controller="myController"> <form name=" ...
- Koa 提交和接收 JSON 表单数据
来自 url 中的 query 参数可直接通过 context.query 获取,但 POST 方式提交的表单数据则需要借助中间件的解析来完成,比如 koa-bodyparser. 首先准备好一个表单 ...
- html基础之 表单提交方法
最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...
随机推荐
- Visual Studio 2017部署方法
1.打开官网下载链接 https://www.visualstudio.com/zh-hans/downloads/ 2.选择适合的版本,选择下载,进入下载界面 如果无反应,点击请单击此处重试,开始下 ...
- 【JVM】面试题之死锁及问题是怎么定位
前言 之前面试的时候被问到死锁这块的问题,借着最近学习jvm来总结下死锁相关的知识.如果有地方写的不到位的地方,麻烦读者及时提出,放在评论区,我这边也好及时改正. 回顾 所谓,温故而知新,首先回顾下, ...
- CRISPR/Cas9|InParanoid|orthoMCL|PanOCT|pan genome|meta genome|Core gene|CVTree3|
生命组学: 泛基因组学:用于描述一个物种基因组,据细菌基因组动力学,因为细菌的基因漂移使得各个细菌之间的基因组差异很大,(单个细菌之间的基因组差异是以基因为单位的gain&loss,而人类基因 ...
- [hdu4630] No Pain No Game
某次模拟赛的T1. 刚开始怀疑是RMQ......我真是太弱了QAQ 题目传送门 正解是离线操作,把所有询问按r从小到大排序. 然后把数从左到右处理,处理完第i个数,就可以回答所有r==i的询问了. ...
- 将js进行到底:node学习1
废话:自高中以来一直对编程充满激情,磨剑五年,如今要毕业了,我不想用我已经擅长的知识敷衍,而想以一个全新的领域去面向我的毕设--是时候学习一下node.js node.js基础 对于JavaScrip ...
- HashMap的四种遍历!
HashMap的四种遍历 import java.util.Collection; import java.util.HashMap; import java.util.Map; import jav ...
- Bootstrap插件及其应用方法网址
全局CCS样式 https://v3.bootcss.com/css/#type-lists 组件 https://v3.bootcss.com/components/#pagination Boot ...
- 关于CLOSE BY CLIENT STACK TRACE
关于CLOSE BY CLIENT STACK TRACE 程序正常运行,数据库连接可以获取,一些列操作都可以实现,可在debug信息中总会一段时间就报如下错误: java.lang.Exceptio ...
- Jennifer Chayes: 生活始终在你手中
Jennifer Chayes 听到Mark Kac.Freeman J. Dyson.林家翘,或者是David I. Gottlie.BerndSturmfels和Sir John Ball等 ...
- [人工智能]NumPy基础
理解NumPy 本文主要介绍NumPy的基础知识,NumPy是一个功能强大的Python库,允许更高级的数据操作和数学计算. 什么是NumPy NumPy,来源自两个单词:Numerical和Pyth ...