vue表单校验限制输入数字后小数点两位(包括避开通过中文输入法的那些坑)
<el-form-item label="海运运费系数">
<el-input
v-model.trim="ruleForm.oceanFreightCoefficient"
maxlength="8"
@keyup.native="ruleForm.oceanFreightCoefficient=oninput(ruleForm.oceanFreightCoefficient)"
@change="ruleForm.oceanFreightCoefficient=oninput(ruleForm.oceanFreightCoefficient)"
></el-input>
<span>元/千克</span>
</el-form-item>
oninput(num) {
console.log(num)
var str = num
var len1 = str.substr(0, 1)
var len2 = str.substr(1, 1)
var lenLast=str.substr(str.length-1)
//如果第一位是0,第二位不是点,就用数字把点替换掉
if (str.length > 1 && len1 == 0 && len2 != ".") {
str = str.substr(1, 1)
}
//第一位不能是.
if (len1 == ".") {
str = ""
}
//最后一位不能是.
if (str.length==8&&lenLast == ".") {
str = ""
}
//限制只能输入一个小数点
if (str.indexOf(".") != -1) {
var str_ = str.substr(str.indexOf(".") + 1)
if (str_.indexOf(".") != -1) {
str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
}
}
//正则替换
str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
str = str.replace(/\.\d\d\d$/,'') // 小数点后只能输两位
return str
}
vue表单校验限制输入数字后小数点两位(包括避开通过中文输入法的那些坑)的更多相关文章
- vue 表单校验(二)
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- vue表单校验(三)
vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...
- vue 表单校验报错 "Error: please transfer a valid prop path to form item!"
vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...
- vue 表单校验 一
表单校验 一 最近使用elment-ui表单进行各种校验,心力交瘁,依旧不能很好地解决,先列出自己的归类,后期一个个攻破 表单校验史 表单校验准则 参考资源 1 2 3 4 5 第一种 显示明确的错误 ...
- Vue 表单校验 vee-validate
gitHub 地址:https://github.com/baianat/vee-validate 官网API 地址:https://baianat.github.io/vee-validate/ap ...
- vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined
TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm (plat_users.html: ...
- vue input框数字后保留两位小数正则
<el-input type="text" v-model.trim="ruleForm2.marketPrice" maxlength="10 ...
- js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生
上一部分总结了基础常用的js表单校验,包括原生以及框架,下面来总结这一个月涉及到的动态校验: 动态表单校验大致分为三种情况: 1. 首先是固定校验规则,但是表单组件是动态生成的,例如:在表单或者表格里 ...
- Vue Element-ui表单校验规则,你掌握了哪些?
1.前言 Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的. 我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
随机推荐
- gitlab 配置汉化版
转载 https://blog.csdn.net/qq_44895681/article/details/123277087
- IO学习笔记(全)
IO学习笔记 目录 IO学习笔记 一.IO前置知识--Linux系统 1.1 Linux系统--虚拟文件系统(VFS) 1.1.1 首先我们来了解一下Linux中的文件描述 1.1.2 文件类型 父子 ...
- 【服务器数据恢复】HP EVA存储多块硬盘离线的数据恢复案例
服务器故障&检测&分析:某品牌EVA存储设备中的RAID5磁盘有两块硬盘掉线,lun丢失.硬件工程师对故障服务器进行物理故障检测,发现掉线硬盘能够正常读取,无物理故障,也没有发现坏道. ...
- 微信小程序之配置业务域名踩过的坑
1.在配置业务域名弹窗中保存按钮一直加载状态,无法保存则刷新当前界面后重新扫码打开该弹窗.2.检验文件一定要放在目标服务器域名下前端文件夹中,否则(放在后台代码文件夹中)访问不到地址.
- Golang-Study
Golang-Study-Note 参考教程视频:狂神说 https://www.bilibili.com/video/BV1ae41157o9?p=1&vd_source=793668372 ...
- CAD怎么删除图块注释?删除CAD图块注释步骤
CAD设计过程中,有时候会在图纸中添加许多注释,如:文字注释,图块注释,标注样式注释等.当需要删除图纸中的CAD图块注释时,你知道该如何操作吗?本节课程小编就来给大家分享一下浩辰CAD软件中删除CAD ...
- One-Shot Transfer Learning of Physics-Informed Neural Networks
本文提出了一种将迁移学习应用到PINN的方法.可以极大的缩短训练PINN所用的时间,目前,PINN所需要的训练次数往往都在成千上万次, 作者通过批量训练PINN,来学习丰富的潜在空间用来执行迁移学习. ...
- Ubuntu网络重置
Ubuntu网络重置 >重置网络 sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager ...
- vue组件传值 | 子父组件
一.子父组件 1.子组件获得父组件中的值:通过v-bind方式绑定在子组件中 // 子组件中定义propsprops: ['msg'] // 父组件中: <deleteBar :msg='thi ...
- C# 调用LDAP接口获取域用户信息
C# 调用LDAP接口获取域用户信息: 根据用户显示名称和邮箱的前半部分,拉去相应的用户列表,进行智能提示. web 的提示控件可以用select2. using System; using Syst ...