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 输入框数字、中文验证的更多相关文章

  1. ASP.NET c# textbox 正则表达式 文本框只允许输入数字(验证控件RegularExpressionValidator )

    <input type="text" name="test" onKeyUp="test1.value=(this.value=this.val ...

  2. (转)js正则表达式之中文验证

    今天做表单提交的输入框条件验证,验证是否包含中文:网上搜了一圈基于js正则表达式的验证基本不好用,而且大多都是出自一两篇原文的转帖!到底什么才是拿来主义呢.根据搜索结果,本文取精华,告诉大家一个好用的 ...

  3. angular 输入框实现自定义验证

    此插件使用angular.js.JQuery实现.(jQuery的引入需在angular 之前) 用户可以 在输入框输入数据后验证 必填项.整数型.浮点型验证. 如果在form 里面的输入框验证,可以 ...

  4. JQuery数字类型验证正则表达式

    有朋友整了一些关于js与jquery的数字类型验证正则表达式代码,下面我给大家再整理一下. 这里包括了数字验证实现与测试实例了,大家可参考. js验证数字正则表达式 代码如下: //检测是否为数字和小 ...

  5. js正则表达式之中文验证(转)

    原文地址:http://houfeng0923.iteye.com/blog/1035321 今天做表单提交的输入框条件验证,验证是否包含中文:网上搜了一圈基于js正则表达式的验证基本不好用,而且大多 ...

  6. java struts2入门学习---中文验证、对错误消息的分离、结果(result)类型细节配置

    一.需求 利用struts2实现中文验证并对错误消息的抽离. 详细需求:用户登录-->不填写用户名-->页面跳转到用户登录页面,提示用户名必填(以英文和中文两种方式提示)-->填写英 ...

  7. Bootstrap3的输入框数字点击修改效果

    <div class="container"><div class="page-header"><h3>Bootstrap ...

  8. text-align 属性,输入框数字向右靠

    1.业务需求:金额输入框数字向右靠 2.HTML文件 <td id="otherPay_Td"> <input id="otherPay" t ...

  9. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

随机推荐

  1. 11,html5为什呢只需要写<!DOCTYPE HTML>

    11,html5为什呢只需要写<!DOCTYPE HTML> html5不基于SGML,不需要对dtd(百科:翻译为文档类型定义,作用是定义xml文档的合法构建模块,成行声明于xml文档中 ...

  2. Yii2.0 引入外部js css

    <script src="<?= Yii::$app->request->baseUrl . '/js/jquery-2.1.1.min.js'?>" ...

  3. touchstart和click 自动区分

    var clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) return 'touc ...

  4. VBA 学习笔记 - 输入框

    学习资料 https://www.yiibai.com/vba/vba_input_box.html 输入框 InputBox 函数说明 提示用户输入值.当输入值后,如果用户单击确定 按钮或按下键盘上 ...

  5. 【JavaScript】关于eval("("+result+")")的认识

    起因是做现项目时,参用很久之前一个项目的代码,少了一行eval("("+result+")"):控制台始终运行不出结果 大致意思是:eval方法是将json字符 ...

  6. 2_2 3n+1问题

    猜想:对于任意大于1的自然数n,若n为奇数,则将n变为3n+1,否则变为n的一半.经过若干次这样的变换,一定会使n变为1.例如:3→10→5→16→8→4→2→1. 输入n,输出变换的次数.n< ...

  7. Linux 常用命令——查看系统

    有的时候别人给你一个登录方式,但是不知道是啥系统,看图就知道了 1.uname -a    查看电脑以及操作系统 2.cat /proc/version 正在运行的内核版本 3.cat /etc/is ...

  8. ASA密码恢复流程

    1.建立console连接2.重启启动安全设备 3.进入ROMMMON模式出现Use BREAK or ESC to interrupt boot字样时,按下ESC键进入ROMMON模式.4.设置RO ...

  9. MavenProfile简介

    在我们平常的java开发中,会经常使用到很多配制文件(xxx.properties,xxx.xml),而当我们在本地开发(dev),测试环境测试(test),线上生产使用(product)时,需要不停 ...

  10. #P4770 [NOI2018]你的名字 的题解

    题目背景 实力强大的小A 被选为了ION2018 的出题人,现在他需要解决题目的命名问题. 题目描述 小A 被选为了ION2018 的出题人,他精心准备了一道质量十分高的题目,且已经把除了题目命名以外 ...