推荐! el-input 输入框类型;只能输入数字的输入框;保留两位小数输入框;只能输入正整数和0的输入框;手机号正则校验;车牌号码正则校验

去除多余的0看这篇

以下代码可直接复制使用:
在这里插入图片描述

以下代码可直接复制使用!

<template><div><a href="https://baike.baidu.com/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1700215?fr=aladdin#10">百度正则</a><el-input v-model="text1" placeholder="请输入内容"></el-input><el-input v-model="text1" placeholder="可清空" clearable></el-input><el-input v-model.trim="text1" placeholder="自动清除两测空格"></el-input><el-input v-model.trim="num1" placeholder="只是输入正整数和0" @input="changeInputNum(num1)"></el-input><el-input v-model.trim="num2" placeholder="只是输入正整数和0且最多六位" @input="changeInputSix(num2)"></el-input><!-- type="number" 会有上下按钮 且可以输入任何数据  如果想要限制其他条件 就加方法 --><el-input v-model.trim="num3" placeholder="只能输入0和正整数和两位的小数" @input.native="changeInputP($event, num3,)"></el-input><el-input v-model.trim="num3" placeholder="只能输入0和正整数和两位的小数 有上下按钮" type="number" @input.native="changeInputP($event, num3,)"></el-input><!-- 默认数字输入会自动补齐小数点 还会自动四舍五入 --><el-input-number v-model="num5" :precision="2" :step="0.01" :max="10" placeholder="0正负数 最多两位小数"></el-input-number><!-- 去掉加减按钮 去掉自动补齐小数点属性precision 去掉四舍五入 --><el-input-number v-model="num6" :step="0.01" placeholder="0正负数 最多两位小数" class="num_input" @input.native="changeInputPt2($event)"></el-input-number><el-input v-model.trim="num3" placeholder="任何数据" type="number" class="wan_input"><template slot="append"></template></el-input><el-input v-model.trim="num3" placeholder="任何数据" type="number"></el-input><el-input-number v-model="num4" label="可以输入任何数字"></el-input-number><el-input v-model="v2" type="text" placeholder="0到9数字或英文或0到9数字加英文" @input="changeNumOrEnglish"></el-input><el-input v-model="v3" type="text" placeholder="只能英文" @input="changeEnglish"></el-input><el-input v-model="carId" type="text" placeholder="车牌号码 京AAAAAA  京A9999警" @input="changeCar"></el-input><div>{{ carMsg }}</div><el-input v-model="mobile" type="text" placeholder="手机号" @input="changeMobile"></el-input><div>{{ mobileMsg }}</div></div>
</template><script>
export default {data () {return {text1: '',num1: '',num2: '',num3: '',num4: '',num5: undefined,num6: undefined,v2: '',v3: '',carId: '',carMsg: '', // 车牌号码正确错误提示mobile: '',mobileMsg: ''}},methods: {changeInputNum (val) {if (!(/^[1-9]\d*$/.test(val) || val - 0 === 0)) {// 不满足this.num1 = ''val = ''}},changeInputSix (val) {if (!(/^[1-9]\d*$/.test(val) || val - 0 === 0)) {// 不满足this.num2 = ''val = ''} else {if (val.length > 6) {// 不满足this.num2 = val.substring(0, 6)val = this.num2}}},changeInputP (e, val) {console.log(e, val)e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null// console.log(e.target.value)this.num3 = e.target.valueval = e.target.value},changeInputPt2 (e) {console.log(e.target.value)if ((e.target.value.indexOf('.') >= 0)) {e.target.value = e.target.value.substring(0, e.target.value.indexOf('.') + 3) // 这里采用截取 既可以限制第三位小数输入 也解决了数字输入框默认四舍五入问题}console.log(e.target.value)},changeNumOrEnglish (e) {if (!((/^[0-9]*$/.test(e)) || (/^[A-Za-z]+$/.test(e)) || (/^[A-Za-z0-9]+$/.test(e)))) {e = ''this.v2 = ''}},changeEnglish (e) {if (!(/^[a-zA-Z]*$/.test(e))) {e = ''this.v3 = ''}},changeCar (e) {var result = falseif (e.length === 7) {// 常规车牌是7位时候规则为: 省份简称或大写字母共1位+大写字母共1位+大写字母或者数字共4位+大写字母或数字或特殊汉字1位  例如:AAAAAAA  京A9999警var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/result = express.test(e) // 满足条件时候 正则结果是true} else if (e.length === 8) {// 新能源车牌号 8位:省份简称(1位汉字)+发牌机关代号(1位字母)+序号(6位)var express2 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{5}[A-Z0-9挂学警港澳]{1}$/result = express2.test(e)}if (result) {console.log('正确车牌号码')this.carMsg = '正确车牌号码'} else {console.log('错误车牌号码')this.carMsg = '错误车牌号码'}},changeMobile (e) {var flagTel = falseflagTel = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/.test(e)if (flagTel) {console.log('正确手机号')this.mobileMsg = '正确手机号'} else {console.log('错误手机号')this.mobileMsg = '错误手机号'}}}
}
</script><style lang="less" scoped>
.el-input {width: 400px;display: block;margin: 10px 500px;
}
.el-input-number {.el-input {width: 180px;margin: 0;}
}// 内部插槽位置大小自己调整
.el-input-group__append {float: left;height: 40px;box-sizing: border-box;margin: -40px 356px;
}.wan_input{position: relative;/deep/.el-input-group__append{position: absolute;right: 0;top: 0;height: 38px;border-radius:0 3px 3px  0;line-height: 38px;text-align: center;}
}.num_input {/deep/.el-input-number__decrease,/deep/.el-input-number__increase {display: none !important;}/deep/.el-input__inner {padding: 0 !important;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403540.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux的搜索和时间

今天学了一些&#xff0c;学了在linux内关键字搜索&#xff0c;还有它的一些设定和选项。 还有linux的时间问题&#xff0c;如何查看时间&#xff0c;分段查看时间&#xff0c;月份&#xff0c;日期&#xff0c;天数&#xff0c;小时&#xff0c;分钟&#xff0c;秒数。 还有就…

Java多线程之JUC包:Semaphore源码学习笔记

若有不正之处请多多谅解&#xff0c;并欢迎批评指正。 请尊重作者劳动成果&#xff0c;转载请标明原文链接&#xff1a; http://www.cnblogs.com/go2sea/p/5625536.html Semaphore是JUC包提供的一个共享锁&#xff0c;一般称之为信号量。 Semaphore通过自定义的同步器维护了一个…

在vue项目中操作元素ref案例;

原博主链接 <!--* Description:会动的词云* Author: Vergil* Date: 2021-08-25 14:17:45* LastEditTime: 2021-08-25 17:08:15* LastEditors: Vergil --> <template><div class"wordCloud" ref"wordCloud"></div> </template&…

epoll.h 源码记录

epoll.h源码&#xff1a; /* Copyright (C) 2002-2013 Free Software Foundation, Inc.This file is part of the GNU C Library.The GNU C Library is free software; you can redistribute it and/ormodify it under the terms of the GNU Lesser General PublicLicense as …

calc()函数及vmin,vmax,vh,vw的认识,在family里的实战运用

css的calc()函数用于动态计算长度值&#xff1b; 比如下面这个&#xff0c; font-size: calc(10px 2vmin); 控制字体缩放。 这里的vmin&#xff08;相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin&#xff09;&#xff1b; 比如我们的视口长1…

【C->Cpp】深度解析#由C迈向Cpp(2)

目录 &#xff08;一&#xff09;缺省参数 全缺省参数 半缺省参数 缺省参数只能在函数的声明中出现&#xff1a; 小结&#xff1a; &#xff08;二&#xff09;函数重载 函数重载的定义 三种重载 在上一篇中&#xff0c;我们从第一个Cpp程序为切入&#xff0c;讲解了Cpp的…

MySQL主从数据库配置

公司有未知台服务器&#xff0c;以后都要自己来接管。MySQL主从是必需要会的技术&#xff0c;所以加强学习一下以图以后安稳日子啊&#xff01; 主服务器&#xff08;master&#xff09;: 192.168.30.204&#xff0c;用yum安装的MySQL.&#xff08;内有多个库&#xff09; 从服…

转: ant condition使用

评注&#xff1a; 用c语言的方式来&#xff0c;比喻ant...比较好理解 转&#xff1a; http://www.smithfox.com/?e176 [备忘] Apache Ant中的逻辑判断 [原创链接: http://www.smithfox.com/?e176 转载请保留此声明, 谢谢!! ] 在写Ant时有时免不了要简单的逻辑, 本文并没有创造…

Epoll在LT和ET模式下的读写方式

From: http://www.ccvita.com/515.html 在一个非阻塞的socket上调用read/write函数, 返回EAGAIN或者EWOULDBLOCK(注: EAGAIN就是EWOULDBLOCK) 从字面上看, 意思是:EAGAIN: 再试一次&#xff0c;EWOULDBLOCK: 如果这是一个阻塞socket, 操作将被block&#xff0c;perror输出: Res…

react 创建

1&#xff1a;可以html页直接引入 <script src"../build/react.development.js"></script><script src"../build/react-dom.development.js"></script><script src"../build/babel.min.js"></script> 2&a…

《精彩绝伦的CSS》读书笔记(二)

3.2 大多数允许使用多个关键字的CSS属性都允许以任何顺序书写关键字,但font属性是很少见的例外之一.font: <font-size> <font-family>;这连个只必须按照既定的顺序进行书写,如果顺序颠倒或者漏掉了其中一个,浏览器会完全忽略这条声明. 其他关键字全部都得放在这两个…

Session机制详解

虽然session机制在web应用程序中被采 用已经很长时间了&#xff0c;但是仍然有很多人不清楚session机制的本质&#xff0c;以至不能正确的应用这一技术。本文将详细讨论session的工作机制并且对在 Java web application中应用session机制时常见的问题作出解答。 一、术语ses…

element-ui的表单校验;el-form表单校验;el-form表单自定义校验;手机号校验;车牌号校验;车牌号正则校验;手动校验表单某一项;手动清空表单的某一项校验结果

示例&#xff1a;代码在末尾 可以直接复制使用 一、基本属性认知&#xff1a; 1. required: true 会有 * &#xff0c; 但仅是触发最后点击提交按钮时&#xff0c;校验某一项位必填&#xff1b;与输入事件或者选择或者失焦时候 怎么校验无关 &#xff08;这时候的校验取决于是…

npm eject 暴露webpack报错,less或sass添加报错

在使用react时候&#xff0c;添加sass或者less&#xff0c;需要暴露config里的webpack出来&#xff0c;直接npm eject会暴以下错&#xff1b; Usage: npm <command> where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, …

Eclipse For JavaSE安装、配置、测试

Eclipse For JavaSE安装、配置、测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.安装与配置 4.JavaSE开发测试 5.ADT安装与Android开发测试 6.注意事项 7.相关博文 >>看不清的图片可在新标签打开查看大图 1.概述 eclipse应该是Java开发界家喻户晓的IDE了&#xff0c;通…

关于GNS3占用很大CPU的问题,很大可能对你有用

在用GNS3的时候不知道为什么&#xff0c;CPU居高不下&#xff0c;占据100%&#xff0c;拼命计算IDLE值&#xff0c;甚至使用上了BES软件&#xff0c;都没用&#xff0c;后来在51CTO看到有个朋友回帖说是更改一下RAM应该可以。我发现GNS3给每台设备默认是分配128M&#xff0c;于…

Typescript学习;Typescript总结;Typescript 的数据类型有哪些?

推荐一个学习Typescript的网址&#xff0c;写的特别清晰易懂&#xff0c;比官网好理解&#xff1a;Typescript文档整理 一个总结&#xff1a;Typescript 的数据类型有哪些

epoll的两种模式

From: http://haoningabc.iteye.com/blog/1432958 linux异步IO浅析 http://hi.baidu.com/_kouu/blog/item/e225f67b337841f42f73b341.html epoll有两种模式,Edge Triggered(简称ET) 和 Level Triggered(简称LT).在采用这两种模式时要注意的是,如果采用ET模式,那么仅当状态发生…

react 添加less预处理语言

首先是安装react react创建 创建完了&#xff0c;添加react 首先cnpm i less less-loader --save-dev 下载完成后执行&#xff1a;npm run eject&#xff1b;暴露config等一些配置文件 config目录有个webpack配置文件&#xff0c;修改 const cssRegex /\.css$/; 改成 con…