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 ...
随机推荐
- MS15-020 文件共享漏洞利用
Metasploit MS15-020漏洞利用 环境: 共享机/受害者:windows xp IP:192.168.222.1 攻击机:kali linux IP:192.168.10.1 msfco ...
- 64位WIN7 配置IIS遇到问题
App_global.asax.sr8_llzl.dll' -- '拒绝访问. 设置c:windows\temp 目录访问权限 temp--> 属性-->安全-- > 添加IIS_I ...
- RAM子账户登录DMS对库进行管理
前言:阿里云账户是个权限很大的账户,有时候为了不让更多的人知道,但是又必须让别人管理里面某个模块的功能的时候,RAM子账户就显得很重要,所以设置子账户的权限就很有必要了,下面简单设置两种权限(dms上 ...
- dotfuscator安装
1.vs 2017 安装 dotfuscator 组件 打开vs 2017 按 ctrl + Q在输入框中输入“dotfuscator” ,选中第一个. 2.安装完成后即可在vs的工具中看到该组件 3 ...
- XP停止更新不用愁 瑞星XP护盾给你持续保护
4月8日,微软正式结束了Windows XP的支持,所有XP系统将不会再收到来自微软提供的补丁和安全更新等服务,叱咤OS江湖十几年的一代操作系统终于完美谢幕.但谢幕不等于消失,据相关机构统计,虽然微软 ...
- 关于php自学
自己本人现在正在自学php有一段时间了,不知道现在的学习状态咋样,在我看来应该属于不算很糟糕,但有点糟糕的状态. 如果算学习自学php的话,现在断断续续应该是有5个月了,按理说是差不多可以做出独立项目 ...
- id0-rsa WP合集
忙里偷闲做做题wwwwwwwwwwwww Intro to Hashing Intro to PGP Hello PGP Hello OpenSSL Intro to RSA Caesar Hello ...
- tf.estimator
estimator同keras是tensorflow的高级API.在tensorflow1.13以上,estimator已经作为一个单独的package从tensorflow分离出来了.estimat ...
- Pandas提取单元格的值
如提取第1行,第2列的值: df.iloc[[0],[1]] 则会返回一个df,即有字段名和行号. 如果用values属性取值: df.iloc[[0],[1]].values 返回的值会是列表,而且 ...
- 模拟HTTP请求超时时间设置
HTTP请求有两个超时时间:一个是连接超时时间,另一个是数据传输的最大允许时间(请求资源超时时间). 使用curl命令行 连接超时时间用 --connect-timeout 参数来指定 数据传输的最大 ...