input框校验：小数点保留两位，只能输入0--100

2024年2月27日 254次阅读 来源: 想搞全栈的前端

input输入值校验

第一种

$('input').keyup(function(){ 
		var value = $(this).val()
		var sum = 0;
		// 清除"数字"和"."以外的字符
	    value = value.replace(/[^\d.]/g,"");
	    // 验证第一个字符是数字
	    value = value.replace(/^\./g,"");
	    // 只保留第一个, 清除多余的
	    value = value.replace(/\.{2,}/g,".");
	    value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
	    // 只能输入两个小数
	    value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
	    value>100?value=100:''
	    value<0?value=0:''
		$(this).val(value)
	})

第二种

/* 百分比校验：数字校验只能输入两位小数 */
	function checkPer(e) { 
		$(e).val($(e).val().replace(/[^\d.]/g, "")) //清除“数字”和“.”以外的字符
		$(e).val($(e).val().replace(/^\./g,""));//验证第一个字符是数字而不是
		$(e).val($(e).val().replace(/\.{2,}/g, ".")) //只保留第一个. 清除多余的
		$(e).val($(e).val().replace(".", "$#$").replace(/\./g, "").replace("$#$", "."))
		$(e).val($(e).val().replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'))//只能输入两个小数
	    if ($(e).val().indexOf(".") < 0 && $(e).val() != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
	   	 $(e).val(parseFloat($(e).val()))
	 	}
	    if(Number($(e).val())>100){ $(e).val(100)}
    }

VUE

// 数字校验 0或正数；保留两位小数
  public checkNum(index:any,prop?:any){ 
  // 格式化限制数字文本框输入，只能数字或者两位小数
    // 清除"数字"和"."以外的字符
    (this.$refs.tableProp as any).tableDataObj[index][prop] = (this.$refs.tableProp as any).tableDataObj[index][prop].replace(/[^\d.]/g,"");
    // 验证第一个字符是数字
    (this.$refs.tableProp as any).tableDataObj[index][prop] = (this.$refs.tableProp as any).tableDataObj[index][prop].replace(/^\./g,"");
    // 只保留第一个, 清除多余的
    (this.$refs.tableProp as any).tableDataObj[index][prop] = (this.$refs.tableProp as any).tableDataObj[index][prop].replace(/\.{2,}/g,".");
    (this.$refs.tableProp as any).tableDataObj[index][prop] = (this.$refs.tableProp as any).tableDataObj[index][prop].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    // 只能输入两个小数
    (this.$refs.tableProp as any).tableDataObj[index][prop]= (this.$refs.tableProp as any).tableDataObj[index][prop].replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
 
    //如果有小数点，不能为类似 1.10的金额 
    if((this.$refs.tableProp as any).tableDataObj[index][prop].indexOf(".")> 0  && (this.$refs.tableProp as any).tableDataObj[index][prop].indexOf("0")>2){ 
      (this.$refs.tableProp as any).tableDataObj[index][prop]= parseFloat((this.$refs.tableProp as any).tableDataObj[index].ratio); 
    }
    //如果有小数点，不能为类似 0.00的金额 
    if((this.$refs.tableProp as any).tableDataObj[index][prop].indexOf(".")> 0  && (this.$refs.tableProp as any).tableDataObj[index][prop].lastIndexOf("0")>2){ 
      (this.$refs.tableProp as any).tableDataObj[index][prop]= parseFloat((this.$refs.tableProp as any).tableDataObj[index][prop]); 
    } 
     //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
    if ((this.$refs.tableProp as any).tableDataObj[index][prop].indexOf(".") <= 0 && (this.$refs.tableProp as any).tableDataObj[index][prop] != "") { 
      (this.$refs.tableProp as any).tableDataObj[index][prop] = parseFloat((this.$refs.tableProp as any).tableDataObj[index][prop]);
    }
  }```
    原文作者：想搞全栈的前端
    原文地址: https://blog.csdn.net/qq_42068550/article/details/115398874
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞