首先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. 吴裕雄--天生自然Android开发学习:1.2 开发环境搭建

    现在主流的Android开发环境有: ①Eclipse + ADT + SDK ②Android Studio + SDK ③IntelliJ IDEA + SDK 现在国内大部分开发人员还是使用的E ...

  2. java内部类基础知识

    一.java内部类具体分四大类 1.成员内部类 2.静态内部类 3.局部内部类 4.匿名内部类 1.成员内部类             :作为类的成员,存在于类中  //成员内部类可以调用外部类的所有 ...

  3. Qt 延时处理的几种办法

    有些时候,我们需要程序延时一会儿: 这里提供四种方法: 1.多线程程序使用QThread::sleep()或者QThread::msleep()或QThread::usleep()或QThread:: ...

  4. 年轻的心与渐行渐近的梦——记微软-斯坦福产品设计创新课程ME310

    作者:中国科学技术大学 王牧 Stanford  D. School 2014年6月,沐浴着加州的阳光,在斯坦福大学(下文简称Stanford)完成汇报后,历时一年的创新设计课程ME310的项目结束 ...

  5. <JZOJ5904>刺客信条

    然鹅考场上打错某变量名导致30都没有 调了很久因为 没转换double 死亡 #include<cstdio> #include<algorithm> #include< ...

  6. 红灯区:DevOps 建设的思考和实践

    点击关注"有赞coder" 获取更多技术干货哦- 作者:费解 团队:效能改进 背景 众所周知,在丰田精益生产中,核心观念包含对人的尊重.消除浪费.持续改善,只有这样,企业才能保持良 ...

  7. form组件及cookie和session

    多对多关系表的三种创建方式 1.全自动创建 优势:不需要你手动创建第三张表 不足:由于第三张表不是你手动创建的,也就意味着,第三张表字段是固定的无法更改 class Book(models.Model ...

  8. SpringMVC之添加照片并修改照片名字

    @RequestMapping(value="/addIdcardsSubmit",method={RequestMethod.POST,RequestMethod.GET}) p ...

  9. Zookeeper:fsync超时导致实例异常

    一.问题描述 2019-02-19 08:44左右,实时计算服务重启,报错显示找不到zk集群的leader节点,同时ZooKeeper集群有告警显示连接超时: 指标[连接耗时(ms)=18221]符合 ...

  10. AIDLservice

    有三种情况:如果直接使用服务,则没有必要进行绑定,但是如果要使用服务里面的方法,则要进行绑定.具体的启动情况有下: 其中很重要一点:bindService和unbindService是成对出现的. 1 ...