vue 输入框数字、中文验证
vue项目是基于element框架做的,在做form表单时,要做些验证,element框架也提供了自定义验证
下面是一些常见的验证
只允许输入数字:
可以直接用框架的rule去验证,但必须在model后加上number
<el-form-item label="姓名:">
<el-input v-model.number="num"></el-input>
</el-form-item> num: [
{required: true, message: '请输入数量'},
{type: 'number', message: '数量必须为数字值'}
],
只允许输入数字和小数:
<el-input v-model="items.volume" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
过滤中文:
<el-input v-model="form.trailer.so_no" oninput="value=value.replace(/[\u4e00-\u9fa5]/g, '')"></el-input>
补充:
由于使用了<el-form>组件,添加了rules验证规则,导致与oninput事件的验证规则发生了冲突,所以修改如下
<el-input v-model="form.trailer.so_no" oninput="value=value.replace(/[\u4e00-\u9fa5]/g, '')" @change="deal(index,indexs,$event,'volume')"></el-input>
deal(index,indexs,value,prop){
this.form.sark_type[index].child[indexs][prop]=value
},
对当前属性重新赋值,也可以把oninput事件的验证移到change事件,不过这样验证只能在失焦的时候触发
ps:由于属性层级较多,包含了多层数组,通过element自定义验证去做,要逐层拆属性,着实有点麻烦。
vue 输入框数字、中文验证的更多相关文章
- ASP.NET c# textbox 正则表达式 文本框只允许输入数字(验证控件RegularExpressionValidator )
<input type="text" name="test" onKeyUp="test1.value=(this.value=this.val ...
- (转)js正则表达式之中文验证
今天做表单提交的输入框条件验证,验证是否包含中文:网上搜了一圈基于js正则表达式的验证基本不好用,而且大多都是出自一两篇原文的转帖!到底什么才是拿来主义呢.根据搜索结果,本文取精华,告诉大家一个好用的 ...
- angular 输入框实现自定义验证
此插件使用angular.js.JQuery实现.(jQuery的引入需在angular 之前) 用户可以 在输入框输入数据后验证 必填项.整数型.浮点型验证. 如果在form 里面的输入框验证,可以 ...
- JQuery数字类型验证正则表达式
有朋友整了一些关于js与jquery的数字类型验证正则表达式代码,下面我给大家再整理一下. 这里包括了数字验证实现与测试实例了,大家可参考. js验证数字正则表达式 代码如下: //检测是否为数字和小 ...
- js正则表达式之中文验证(转)
原文地址:http://houfeng0923.iteye.com/blog/1035321 今天做表单提交的输入框条件验证,验证是否包含中文:网上搜了一圈基于js正则表达式的验证基本不好用,而且大多 ...
- java struts2入门学习---中文验证、对错误消息的分离、结果(result)类型细节配置
一.需求 利用struts2实现中文验证并对错误消息的抽离. 详细需求:用户登录-->不填写用户名-->页面跳转到用户登录页面,提示用户名必填(以英文和中文两种方式提示)-->填写英 ...
- Bootstrap3的输入框数字点击修改效果
<div class="container"><div class="page-header"><h3>Bootstrap ...
- text-align 属性,输入框数字向右靠
1.业务需求:金额输入框数字向右靠 2.HTML文件 <td id="otherPay_Td"> <input id="otherPay" t ...
- vue学习记录:vue引入,validator验证,数据信息,vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
随机推荐
- 6,html5的离线储存怎么用
6,html5的离线储存怎么用 客户端:(百科:或称为用户端,是指与服务器相对应,为客户提供本地服务的程序.除了一些只在本地运行的应用程序,一般安装在客户机上,需要与服务端配合运行) 在用户没有和因特 ...
- C:编译过程、目标代码文件、 可执行文件和库
C编程的基本策略是, 用程序把源代码文件转换为可执行文件(其中包含可直接运行的机器语言代码). 典型的C实现通过编译和链接两个步骤来完成这一过程. 编译器把源代码转换成中间代码, 链接器把中间代码和其 ...
- leetcode 0206
目录 ✅ 292. Nim 游戏 ✅ 933. 最近的请求次数 ✅ 942. 增减字符串匹配 仍旧有需要思考的地方 py尝试 ✅ 977. 有序数组的平方 ✅ 292. Nim 游戏 https:// ...
- Android基础 -- Activity之间传递数据(bitmap和map对象)
原文:http://blog.csdn.net/xueerfei008/article/details/23046341 做项目的时候需要用到在2个activity之间传递一些数据,之前做的都是些字符 ...
- iOS 开发之 RunLoop 详解
1)什么是 Runloop ? 1.字面上是运行循环,内部就是 do-while 循环,在这个循环内不断地处理各种任务. 2.一个线程对应一个 Runloop ,主线程的 RunLoop 默认是开启的 ...
- vjudge Trailing Zeroes (III) (二分答案 && 数论)
嗯... 题目链接:https://vjudge.net/contest/318956#problem/E 这道题是二分答案+数论,但首先是数论,否则你不知如何二分... 首先关于一个阶乘的结果最后会 ...
- [运维] 如何访问虚拟机上的 Tomcat ?
环境: 虚拟机: VMware 15 pro 操作系统 Linux CentOS 7 64 物理机: Windows 7 事先准备: 1: 下载 Tomcat 的压缩包 apache-t ...
- office365激活码序列号密钥:
亲测可用: NGCM9-FWB6X-9WKYC-GRWVD-63B3P
- uniGUI之UniSyntaxEdit(24)
UniSyntaxEdit1语法高亮显示控件,主要属性Language,它是 多行 1]Language 语言 2]执行 FDquery1.Open(UniSyntaxEdit1.Lines.Tex ...
- Python 爬取 热词并进行分类数据分析-[简单准备] (2020年寒假小目标05)
日期:2020.01.27 博客期:135 星期一 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备](本期博客) b.[云图制作+数据导入] ...