技术标签: elementUI 前端 vue.js javascript
<el-input type="number" placeholder="请输入" min="1" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>
<el-input type="number" placeholder="请输入" min="1" oninput ="value=value.replace(/[^\d]/g,'')" v-model.number="count"></el-input>
oninput ="value=value.replace(/[^0-9.]/g,'')"
oninput ="value=value.replace(/^[\d\s]+$/g,'')"
方法-:
<el-input
v-model="scope.row.weight"
oninput="value = Number(value) || 0"
>
方法二:
<el-input
v-model="scope.row.weight"
oninput="value=value.replace(/\D|^0/g, '')"
>
方法三:
<el-input
v-model="scope.row.weight"
oninput="value=value.replace(/[^\d]|^[0]/g, '')"
>
// 保留一位小数
oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
// 若需要保留N位小数,则把2 改为 1 + n即可
<el-input min="0" max="100" type="number" @input="numberChange($event, 100)" @change="numberChange($event, 100)" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>
numberChange (val, max) {
this.$nextTick(() => {
this.count = Math.min(parseInt(val), max)
})
}
rules: {
giveHour: [
{
required: true, message: '请输入客户退费金额', trigger: 'blur' },
{
pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保留两位小数' }
]
}
onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
<el-input
v-model.trim="form.userNumber"
placeholder="请输入用户编号"
clearable
onkeyup="this.value=this.value.replace(/[^\w]/g,'')"
></el-input>
<el-input oninput="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')"></el-input>
<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z]/g,'')"></el-input>
校验方法可以封装到 util.js 里面
// utils.js
// 全局函数
export function validateMobile(str) {
// 检查手机号码格式
return /^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/.test(
str,
);
}
export function validateEmail(str) {
// 检查邮箱格式
return /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/.test(str);
}
export function validateBankCard(str) {
// 检查银行卡
return /^[1-9]\d{9,29}$/.test(str);
}
export function validatePhone(str) {
// 检查电话格式
return /^(0\d{2,4}-)?\d{8}$/.test(str);
}
export function validateQQ(str) {
// 检查QQ格式
return /^[1-9][0-9]{4,}$/.test(str);
}
// 检查验证码格式
export function validateSmsCode(str) {
return /^\d4$/.test(str);
}
// 校验 URL
export function validURL(url) {
const reg =
/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
// 校验特殊字符
export function specialCharacter(str) {
const reg = new RegExp(
// eslint-disable-next-line quotes
"[`~!@#$^&*()=|{}':;',\\[\\]<>《》/?~!@#¥……&*()——|{}【】‘;:”“'。,、? ]"
)
return reg.test(str)
}
// 非纯数字非纯字母 /^(?![0-9]+$)[0-9A-Za-z|a-zA-Z]{6,16}$/
let userNameReg = /^(?![0-9]+$)[0-9A-Za-z|a-zA-Z]{6,16}$/;
if (!userNameReg.test(form.userName)) {
this.$message.warning('请输入6-16位的非纯数字登录账号~');
return false;
}
<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"></el-input>
<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')"></el-input>
<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')"></el-input>
// 去除所有的空格:
<el-input oninput = "value=value.replace(/\s*/g,"")"></el-input>
// 去除两头的空格:
方法一:<el-input oninput = "value=value.replace(/^\s*|\s*$/g,"")"></el-input>
方法二:<el-input v-model.trim=""></el-input>
// 去除左侧的空格:
<el-input oninput = "value=value.replace(/^\s*/g,"")"></el-input>
// 去除右侧的空格:
<el-input oninput = "value=value.replace(/(\s*$)/g,"")"></el-input>
Tips: 最近测试给提了个bug,window 系统电脑,使用 oninput 方法进行输入框正则校验,如果疯狂进行输入的话会出现当前输入框的双向绑定失效,导致输入框无法正常输入值。这时候推荐使用 @input 方法可以避免这个方法,还有一个办法是失焦的时候重新进行一次赋值操作也可以解决。mac系统没有出现这个问题…
持续更新中,欢迎大家留言交流!
文章浏览阅读74次。思路:num%r得到末位r进制数,num/r得到num去掉末位r进制数后的数字。得到的末位r进制数采用头插法插入链表中,更新num的值,循环计算,直到num为0,最后输出链表。//重置,s指针与头指针指向同一处。//更新num的值,至num为0退出循环。//末位r进制数存入s数据域中。//头插法插入链表中(无头结点)//定义头指针为空,s指针。= NULL) //s不为空,输出链表,栈先入后出。
文章浏览阅读176次。武汉芯源半导体积极参与推动中国的大学教育改革以及注重电子行业的人才培养,建立以企业为主体、市场为导向、产学研深度融合的技术创新体系。2023年3月,武汉芯源半导体开发者扶持计划正式开始进行,以打造更为丰富的CW32生态社区。_cw32开发者扶持计划申请
文章浏览阅读5.7k次。2014年底买的一块2TB希捷机械硬盘ST2000DM001-1ER164,用了两年更换了主板、CPU等,后来出现开机不识别的情况,具体表现为:关机后开机,找不到硬盘,就进入BIOS了,只要在BIOS状态下待机半分钟左右再重启,硬盘就会出现。进入系统后,重启(这个过程中主板对硬盘始终处于供电状态),也不会出现不识别硬盘的现象。就好像是硬盘或主板上某个电容坏了一样,刚开始给硬盘通电的N秒钟内电容未能..._st2000dm001不认盘
文章浏览阅读1.5k次。ADO.NET的数据源不单单是DB,也可以是XML、ExcelADO.NET连接数据源有两种交互模式:连接模式和断开模式两个对应的组件:数据提供程序(数据提供者)&DataSetSqlConnectionStringBuilder——连接字符串Connection对象用于开启程序和数据库之间的连接public SqlConnection c..._列举ado.net在操作数据库时,常用的对象及作用
文章浏览阅读113次。【代码】Android 自定义对话框不能铺满全屏。_android dialog宽度不铺满
文章浏览阅读331次。Redis的主从集群与哨兵模式Redis的主从模式全量同步增量同步Redis主从同步策略流程redis主从部署环境哨兵模式原理哨兵模式概述哨兵模式的作用哨兵模式项目部署Redis的主从模式1、Redis虽然读取写入的速度都特别快,但是也会产生读压力特别大的情况。2、为了分担读压力,Redis支持主从复制,保证主数据库的数据内容和从数据库的内容完全一致。3、Redis的主从结构可以采用一主多从或者级联结构,Redis主从复制可以根据是否是全量分为全量同步和增量同步。全量同步Redis全量复制一般发_redis的主从和哨兵集群
文章浏览阅读116次。作者:brightwang原文:https://www.jianshu.com/p/ab9aa8d4df7d最近我遇到了一个bug,我试着通过Rails在以“utf8”编码的MariaDB中保存一个UTF-8字符串,然后出现了一个离奇的错误:Incorrect string value: ‘ð 我用的是UTF-8编码的客户端,服务器也是UTF-8编码的,数据库也是,就连要保存的这个字符串“????..._mysql utf8的作用
文章浏览阅读278次。毕业这么久了,最近闲来准备把毕设过程中的代码整理公开一下,所有代码其实都是网上找的,但都是经过调试能跑通的,希望对需要的人有用。PS:里边很多注释不讲什么意思了,能看懂的自然能看懂。_matlab图像比较
文章浏览阅读73次。思路: screen分为普通和复杂两种,普通的功能大部分是页面跳转以及简单的crud数据,复杂的单独弄出来 跳转普通的screen,直接根据配置文件调整设置<layouts> <loyout screenId="0" bg="bg_start" name="start" defaultWinId="" bgm="" remark=""> ..._libgdx ui 布局
文章浏览阅读3k次,点赞2次,收藏13次。playwright-python 处理Text input和Checkboxs 和 radio buttonsText input输入框输入元素,直接用fill方法即可,支持 ,,[contenteditable] 和<label>这些标签,如下代码:page.fill('#name', 'Peter');# 日期输入page.fill('#date', '2020-02-02')# 时间输入page.fill('#time', '13-15')# 本地日期时间输入p_playwright checkbox
文章浏览阅读596次,点赞5次,收藏6次。这是我看到最最详细的安装说明文章了,必须要给赞!学习了,也配置了,成功的一批!真不知道还有什么可补充的了,在此做个推广,喜欢的小伙伴,走起!_win10 php 安装swoole
文章浏览阅读1k次。今天想实现页面的自适应,本来用的是栅格,但效果不理想,就想起了rem布局。以前使用rem布局,都是在原生html里,还没在框架里使用过,百度没百度出来,就自己琢磨,不知道方法规范不规范,反正成功了,操作如下:1、下载flexible.js2、引入到angular项目里3、根据自己的需要修改细节3.1、在flexible.js里修改每份的像素,3.2、引入cssrem插件,在设置里设..._angular 使用rem