首先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中表单验证,在提交时自动聚焦到未验证通过的那栏;及循环表单的验证的更多相关文章

  1. el-mement表单校验-校验失败时自动聚焦到失败的input框

    思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...

  2. 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  3. form表单Get方式提交时,action中带参数传递不了

    <form action="getPostServlet/getPost.do?param4=param4" method="get"> <i ...

  4. js的作用是临时修改 表单Action提交的地址,因为 又有新的动作需要把表单参数提交到 新的servlet中,这点很重要

    JavaScript可以临时修稿 form表单的提交地址

  5. 表单提交数据量大于2m,java 后台接受不到表单传递过来的数据

    一般来说 post请求提交的数据无大小限制,但是tomcat 设置默认的表单传输数据大小不能2m,这时候当数据大于2m后台接收达不到表单的数据,需要修改tomcat的server.xml的的maxPo ...

  6. springcloud +spring security多种验证方式之第三方token生成自己的token通过校验和自己的表单验证大体流程

    步骤: 1.继承 WebSecurityConfigurerAdapter.class,其中使用两个过滤器,一个spring scurity自带的UsernamePasswordAuthenticat ...

  7. angular1 表单验证demo

    这是一个angular1 验证表单的小栗子: 先看代码: <div ng-controller="myController"> <form name=" ...

  8. Koa 提交和接收 JSON 表单数据

    来自 url 中的 query 参数可直接通过 context.query 获取,但 POST 方式提交的表单数据则需要借助中间件的解析来完成,比如 koa-bodyparser. 首先准备好一个表单 ...

  9. html基础之 表单提交方法

    最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...

随机推荐

  1. 前端之css引入方式/长度及颜色单位/常用样式

    1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

  2. android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码

    Android精选源码 android模仿支付宝app"记账本"模块源码 android一个超轻量级剪贴板历史记录管理软件源码 android模仿QQ拖动红点消失动画效果源码 展示 ...

  3. Listary快速查找文件

    快速查找文件 https://www.listary.com/

  4. Mac下通过FFMpeg实现Android手机推流和播放

    一.Mac下搭建推流服务器(Nginx+RTMP+FFMpeg) 安装x264 git clone git://git.videolan.org/x264.git cd x264 ./configur ...

  5. Hell World:)

    第一次弄博客是在2017年春节,自己弄了个域名,租了个小小的VPS,装好了wordpress,挑了一套模板,就这样上线了,可惜wordpress实在不是一个适合写字的地方,插件.主题令人眼花缭乱,慢慢 ...

  6. 吴裕雄--天生自然 R语言开发学习:中级绘图(续二)

    #------------------------------------------------------------------------------------# # R in Action ...

  7. js 中 == 和 === 的区别

    js中的 ==和===的区别 简单理解 js 是弱类型的语言,其中 == 可以理解为 是值是否相等,而===不仅比较值是否相等,还比较类型是否相等. 简单案例: var str = "1&q ...

  8. Docker学习笔记_08使用Rancher pipeline搭建基于容器的CICD

    CICD概述 CI-持续集成(Continuous Integration):频繁地将代码集成到主干的一种开发实践,每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错 ...

  9. Java 关于线程的面试题及答案

    一.职场可能碰到的关于线程的面试题: 1. 什么是线程? 线程是程序中一个单一的顺序控制流程.进程内有一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的基本单位指令运行时的程序的调度单位. ...

  10. 添砖加瓦:[OpenCV]入门(一)

    1.OpenCV安装 (1)下载: 本文采用的是源码的方式进行安装,源码可以从OpenCV官网下载.这里以3.4.1为例. (2)安装 这里下载到的文件为3.4.1.zip."unzip 3 ...