首先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. Python面向对象三大特征

    继承 面向对象中的继承就是继承的类直接拥有被继承类的属性而不需要在自己的类体中重新再写一遍,其中被继承的类叫做父类.基类,继承的类叫做派生类.子类.在python3中如果不指定继承哪个类,默认就会继承 ...

  2. 吴裕雄--天生自然python学习笔记:网页解析

    抓取万水书苑网页中所有<a>标签中的超链接井显示. import requests from bs4 import BeautifulSoup url = 'http://www.wsbo ...

  3. echart封装,前端简单路由,图表设置自动化

    https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...

  4. Protein interaction|insight QUANTA|SYBYL COMPOSER|MODELLER|SWISS_MODEL|WHAT IF|3D-JIGSAW|CPH-ModelGPCRs|Membrane protein|

    生命组学 蛋白质之间的互作可以有以下应用: Eg:改变蛋白质基因,从而组改变结构,削弱蛋白质之间的相互作用. Eg:数据模拟出蛋白质的靶点,即结合腔,将此数据存入结合化合物的dataset,用于制药 ...

  5. 3DMAX 卸载工具,完美彻底卸载清除干净3dmax各种残留注册表和文件

    一些同学安装3dmax出错了,也有时候想重新安装3dmax的时候会出现这种本电脑windows系统已安装3dmax,你要是不留意直接安装,只会安装3dmax的附件,3dmax是不会安装上的.这种原因呢 ...

  6. Docker学习笔记_10 docker应用 - 部署TOMCAT服务

    选择基镜像 基镜像使用dokcer hub官方提供的tomcat8 alpine当前最新版本,https://hub.docker.com/_/tomcat/ docker pull tomcat:8 ...

  7. EMP平台简介(转载)

    1.什么是EMP EMP平台是一个基于J2EE体系的.WEB应用的.基础框架平台: 表现逻辑框架(MVCFrameWork)与业务逻辑框架(EMPBizLogic)分离: 组件化.配置化设计技术: 可 ...

  8. 一分钟搞定pychram远程调试和同步代码

    首先说一下需求,否则很多人都不知道pycharm这个远程同步和调试到底是干嘛使的. 需求很简单,我想要在本地的windows机器上跑一个程序,但是程序运行会加载一些很占内存的树型数据结构,称其为tre ...

  9. 将js进行到底:node学习3

    node重要API之NET--TCP编程之旅 废话:最近去了一趟上海会了会一个程序员朋友,途径SNH48握手会,说好我就去看看,没想到握手了王诗蒙,掉入巨坑:塞纳河.回来后边听着<春夏秋冬> ...

  10. 这些科学家用DNA做的鲜为人知事,你估计都没见过!

    DNA世界的每一步都给人类带来奇妙甚至吃惊的发现.研究人员越来越多地探索和掌握了生命中的分子.生物与技术之间的界限以前所未有的方式模糊,有时甚至更糟.但DNA也为复杂疾病带来简单的答案,存储奇怪的文件 ...