vue项目中遇到需要输入两位小数时校验通过,并且后面多余的0是可以输入的情况如何处理?

vue项目中遇到需要输入两位小数时校验通过,并且后面多余的0是可以输入的情况如何处理?

一、需求分析
1.首先要知道需求具体是什么,简单讲就是我们在一个输入框中输入数字,但是这个数字有可能是6位、7位等;输入后需要对数字进行校验并且在输入错误时输入框要有对应的提示。
2.既然要有提示,那么就成了一个表单校验。校验不通过就要callback对应的错误提示;
3.处理方式可以有正则、JS逻辑,本文介绍JS逻辑;
二、相关代码讲解
html

<template>
	<el-form :model="showInfo" :rules="rules" ref="showInfo">
        <el-form-item prop="money">
        	<el-input type="text" placeholder v-model="money" maxlength="6"></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
	export default {
		data(){
			var numberRuleAllowPoint = (rule, value, callback) => {
		      value = value + "";
		      if (value.replace(/\s/g, "") == "") {
		        callback();
		      }
		      if (typeof (value * 1) != "number" || isNaN(value)) {
		        callback(new Error("请输入正确的数字"));
		      }
		      if (value < 0) {
		        callback(new Error("请输入正确的数字"));
		      }
		      if (value.indexOf(".") != -1) {
		        if (value.split(".")[1].indexOf(".") != -1) {
		          callback(new Error("请输入正确的数字"));
		        } else if (value.split(".")[1] * 1 >= 0) {
		          if ((value.split(".")[1] + "").length > 2) {
		            if ((value.split(".")[1]+"").substring(2) * 1 > 0) {
		              callback(new Error("只允许输入两位小数以内的数字"));
		            }
		          }
		        } else {
		          callback(new Error("请输入正确的数字"));
		        }
		      }
		      callback();
			};
			return {
				showInfo:{
					money:""
				},
				rules:{
					money: [{ validator: numberRuleAllowPoint, trigger: 'blur' }, { required: true, message: "请输入金额", trigger: "blur" }],
				}
			}
		}
	};
</script>

三、简单讲解
1.首先绑定就不说了,应该看得懂;主要讲一下自定义校验,也就是自己定义一个方法来返回校验结果;也就是JS中的callback()方法。
2.讲一下判断逻辑,主要运用split()和substring()方法;原理很简单,就是判断小数点后的数字是否是两位数如果是,就直接不管,如果不是那么从第三位开始往后的数字乘以1如果大于0证明小数点后面的是三位小数,反之用户两位小数后的数字都为0;有一个小细节就是要注意用户输入两个以上包括两个的小数点。
3.基本就是这样,一个小知识点。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值