前端input标签之输入框输入金额校验

1.html的内容

// input标签
<input type="text" id="tmoney" name="tm" class="formsub"/>

2.js的内容

// 前提：引如jQuery包
$("#tmoney").on('input  propertychange',function(){
		//确保输入的是数字
		this.value = this.value.replace(/[^\d\.]/g, '');
		//确保第一个输入的是数字
	    this.value = this.value.replace(/^\./g,'');
	    //确保不能输入两个小数点
	    this.value = this.value.replace(/\.{2,}/g,'.');
	    //保证小数点只出现一次，而不能出现两次以上     
	    this.value = this.value.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
	    //确保只能输入两位小数
	    this.value = this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
	})
$("#tmoney").blur(function(){
		//如果输入框为空，则替换为0.00
		if(this.value == ""){
			this.value = "0.00";
		}
	})

（1）以上JQuery限制输入内容是只能是带两位小数的金额
（2）可以同时绑定 propertychange ¹ 和 input ² 事件，这两个事件其实是一回事，只是不同的标准罢了。
（3）后面的 blur 事件主要是用于判断当输入框为空时自动填充0.00

3.更快捷的方式

// 该方法简单便捷，但不支持小数点的输入金额
<input id="tmoney" class="formsub" type="text" name="tm"  value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>

1. 正则式验证将输入值为非数字的字符替换为空。
2. this.value 表示此输入框的值，/\D/g 为正则表达式，用来匹度配所有非数字字符包括小数点。

说明 ：本文为查阅收集所整理的内容，若有涉及到版权问题请联系处理。

---

1. propertychange 是IE浏览器专属的事件，只要当前对象的属性值发生改变就能触发该事件。 ↩︎

2. input 是标准的浏览器（W3C）事件，一般应用于input元素，当input元素的value发生变化就会触发，无论是键盘输入还是鼠标,或者复制粘贴的值都能及时监听到变化。 ↩︎