首先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. CF-1111B-Average Superhero Gang Power

    首先,对于这题我们要知道要删除一个数使平均值最大一定是删除最小的数,然后我们假设删除操作执行了i次,也就是删除最小的i个数.在已知删除操作次数之后求增加操作的次数就容易了,当然是m - i和k * ( ...

  2. 快速搭建本地Nuget服务

    一  创建Nuget 服务项目 1.创建一个空白的asp.net web项目,需要.net 4.6以上 2.在Nuget中搜索 nuget.server ,可以看到是由 .Net 基金再维护的,几乎傻 ...

  3. Apollo核心概念之“Namespace”

    转载于https://github.com/ctripcorp/apollo,by Ctrip, Inc. Apollo核心概念之“Namespace” 1. 什么是Namespace? Namesp ...

  4. 数位dp对于状态描述与发现的一些感悟

    今天刷的数位dp 第一题看了题解以后知道了数位dp的基本板子,写数位dp的方式(运用记忆化递归的方法)已经基本固定. 那么接下来的难点主要还是对于题目描述的问题,如何抽象成dp中的状态.就今天刷的题来 ...

  5. 正则表达式入门-python代码

    题记 本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例. 正则表达式在很多的应用中都有使用到,特别是在网络爬虫中格式化html后取出自 ...

  6. Eclipse如何打开Android工程

    一.Eclipse如何打开Android工程 1.你可以在file->new->other->android object选择选项:create object from exists ...

  7. 传智播客学习之Android运行原理 (转)

    传智播客学习之Android运行原理 (2010-03-20 22:45:15) 转载▼ 今天终于忙里偷闲,和大家探讨一下android技术,第一次听到3G应该追溯到大学三年级的时候了,记得当时现代通 ...

  8. 推荐一款在UBUNTU下使用的编辑器

    偶然的机会 ,发现了这款软件,以前一直是在用gedit编辑器,但在WINDOWS下写的文档,在ubuntu下用gedit打开后,复制有换行的问题,一直没解决,所以在网上找到了这款软件,安装使用了几天, ...

  9. udev更改按键映射

    通过更改udev的规则实现敲击a键获得s的输出 安装evtest   首先安装evtest检测键盘的扫描码 123456789 # apt install evtest# sudo evtestNo ...

  10. AndroidImageSlider

    最核心的类是SliderLayout,他继承自相对布局,包含了可以左右滑动的SliderView,以及页面指示器PagerIndicator.这两部分都可以自定义. AndroidImageSlide ...