<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>&nbsp;&nbsp;
<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表单校验限制输入数字后小数点两位(包括避开通过中文输入法的那些坑)的更多相关文章

  1. vue 表单校验(二)

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  2. vue表单校验(三)

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

  3. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

  4. vue 表单校验 一

    表单校验 一 最近使用elment-ui表单进行各种校验,心力交瘁,依旧不能很好地解决,先列出自己的归类,后期一个个攻破 表单校验史 表单校验准则 参考资源 1 2 3 4 5 第一种 显示明确的错误 ...

  5. Vue 表单校验 vee-validate

    gitHub 地址:https://github.com/baianat/vee-validate 官网API 地址:https://baianat.github.io/vee-validate/ap ...

  6. vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined

    TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm (plat_users.html: ...

  7. vue input框数字后保留两位小数正则

    <el-input type="text" v-model.trim="ruleForm2.marketPrice" maxlength="10 ...

  8. js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生

    上一部分总结了基础常用的js表单校验,包括原生以及框架,下面来总结这一个月涉及到的动态校验: 动态表单校验大致分为三种情况: 1. 首先是固定校验规则,但是表单组件是动态生成的,例如:在表单或者表格里 ...

  9. Vue Element-ui表单校验规则,你掌握了哪些?

    1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...

  10. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

随机推荐

  1. 使用layui+jQuery实现点击删除单行数据

    使用layui+jQuery实现点击删除单行数据 首先要用到layui的官网手册 地址:https://www.layui.com/ 注意1.  此功能是在使用layui展示数据的基础上实现 3.  ...

  2. 和为K的子数组

    给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的连续子数组的个数 . /** * @param {number[]} nums * @param {number} k ...

  3. 解决在Android studio的Button控件下background背景设置不起作用的问题

    Button控件默认的背景是深紫色的,有时候会看不清按钮上的文本,显得很不方便,想要修改背景色所以添加了background字段,但是又不起作用!!! 1.找到values文件夹下面的themes文件 ...

  4. new与delete只能被重载为成员函数;而<<等只能被重载为非成员函数

    链接:https://www.nowcoder.com/questionTerminal/5760864337084de6891a9944f41e60f4来源:牛客网 应用程序可以将重载的new/de ...

  5. Net Core 3.1 ONVIF 操控海康摄像头

    先给出实现的代码 https://github.com/lu1770/onvif-client.git 也可以通过安装包来使用功能 dotnet add package Onvif 基本用法 Agen ...

  6. Prometheus API说明

    本文来自Prometheus官网手册 和 Prometheus简介,https://www.cnblogs.com/zhoujinyi/p/11955131.html HTTP API 在Promet ...

  7. react 脚手架搭建项目 报错C:\Program Files\nodejs\node_cache\_logs\2022-12-28T14_38_28_286Z-debug-0.log

    报错内容: 解决方法: 第一步: 删除C:\Program Files\nodejs\node_cache\_logs 目录下所有文件 第二步:切换镜像 npm config set registry ...

  8. dvwa sql盲注教程

    原文地址:https://www.jianshu.com/p/757626cec742 一.DVWA-SQL Injection(Blind)测试分析 SQL盲注 VS 普通SQL注入: 普通SQL注 ...

  9. windows下判断程序是否内存泄漏

    在main函数第一行写 _CrtSetDbgFlag(_CRTDBG_ALLOC_MEM_DF | _CRTDBG_LEAK_CHECK_DF); 程序退出后如果有泄漏会有打印

  10. python与java中符号表达式的区别

    python与java中符号表达式的区别 1:三目运算符 python  语句1(表达式1)  if  条件表达式A  else  语句2(表达式2) 执行过程:首先,运算条件表达式A,如果为True ...