使用正则表达式处理金额

前言：

如果只想要一个最多两位小数的正则表达式判断，那你直接复制下面的代码就可以了，如下：

var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;

提醒：上述正则表达式不能处理0、0.0、0.00，如果你的金额不能是上述数字，那就和0比较一下，去除这种情况，对于其他特殊情况，我已经进行了比较全面的测试，可以排除非数字(中英文）、空格、非正常数字(例如002）、小数点多于2位的情况，所以放心用吧！

如果想全面系统在前端使用脚本处理金额，那就静下心慢慢看，你会看到你想要的内容

一、案例：支付宝开放平台的金额验证测试

大家应该都知道支付宝开放平台上面有一个应用叫做“沙箱环境”，地址是：https://openhome.alipay.com/platform/appDaily.htm?tab=account，如果你没有登录的话，上面肯定会让你扫码登录，登录之后就可以看到“沙箱环境”了，上面可以对商户账号或者买家账号进行充值，它支持最多两位小数的充值金额，如果不符合要求就会抛出相应的提示，别着急看正则表达式结果，我来给大家演示一下人家支付宝是如何做该做操作的，测试情况如下所示：

1、什么都不输入

2、输入多个空格

3、输入多个空格之后在输入字符

4、直接输入不合法字符

5、输入金额为0

6、输入正确充值金额

二、模仿支付宝开放平台金额处理方式编写js脚本

大家也看到了上面的测试结果，这肯定需要好几个if判断，下面我给大家演示一下我是如何操作的，以下我所写的代码你可以改变之后在js文件中使用，我的代码是按照支付宝开放平台的测试结果来写的，也是最多只能输入两位小数，除了输入0的时候不符合上面的测试结果，其他的完全符合以上测试结果。

// 检验充值金额是否输入正确，根据判断结果在页面上给出提示信息
function checkData() {
	// 获得充值金额
	var rechargeMoney = XXX;
	
	// 最多只有两位小数的正则表达式
	var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
	
	// 输入金额判断
	// 未输入充值金额
	if (rechargeMoney == "") {
	
		提示"未输入充值金额"的相关代码
		
	}
	// 输入多个空格
	else if (rechargeMoney.trim() == "") {
	
	    提示"未输入充值金额, 充值金额格式不正确"的相关代码
	    
	}
	// 判断充值金额是否正确
	else if (!reg.test(rechargeMoney)){
	    
	    提示"充值金额格式不正确"的相关代码
	    
	}
	// 判断充值金额是否为0、0.0、0.00
	else if (rechargeMoney == 0){
	
	    提示"充值金额必须大于0"的相关代码
	    
	}
	// 充值金额输入正确
	else {
	    
		充值金额正确的相关代码
	
	}
}

// 点击提交表单按钮的时候就执行该方法
function submitForm() {
	// 通过checkData()判断充值金额是否正确，如果正确就返回true用以提交表单，否则就返回false不提交表单
    if (checkData()) {
    	// 提交表单，其中$("#XXX")用以获取表单元素
	    $("#XXX").submit();
    }
}

解释：

当充值金额文本框失去焦点的时候会执行checkData()方法，还有直接点击提交表单按钮的时候也会执行checkData()方法，执行checkData()方法的时候会根据判断结果在页面上展示提示信息，并且在点击提交表单按钮的时候会根据checkData()方法的返回结果决定是否提交表单

三、真实案例展示（和上述js脚本处理过程一致）

// 检验充值金额是否输入正确，根据判断结果在页面上给出提示信息
function checkData() {
	// 找到充值金额
	var rechargeMoney = $("#rechargeMoney").val();
	
	var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
	
	if (rechargeMoney == "") {
	    $("#p1_1").html("未输入充值金额");
	    $(".input_text").addClass("input-red");
	    $("#div1_1").show();
	    return false;
	} else if (rechargeMoney.trim() == "") {
	    $("#p1_1").html("未输入充值金额, 充值金额格式不正确");
	    $(".input_text").addClass("input-red");
	    $("#div1_1").show();
	    return false;
	} else if (!reg.test(rechargeMoney)){
	    $("#p1_1").html("充值金额格式不正确");
	    $(".input_text").addClass("input-red");
	    $("#div1_1").show();
	    return false;
	} else if (rechargeMoney == 0){
	    $("#p1_1").html("充值金额必须大于0");
	    $(".input_text").addClass("input-red");
	    $("#div1_1").show();
	    return false;
	} else {
	    // 如果输入的充值金额正确并且上面已经选中了哪种支付方式就去掉错误提示
	    $(".input_text").removeClass("input-red");
	    $("#div1_1").hide();
	    return true;
	}
}


// 点击提交表单按钮的时候就执行该方法
function submitForm() {
	// 通过checkData()判断充值金额是否正确，如果正确就返回true用以提交表单，否则就返回false不提交表单
    if (checkData()) {
    	// 提交表单，其中$("#aliPayRechargeForm")用以获取表单元素
	    $("#aliPayRechargeForm").submit();
    }
}

解释 ：

上述代码的测试结果是完全正确的，由于篇幅原因，我不在此演示了，接下来我简单说明一下代码思路，当充值金额input文本框失去焦点的时候会调用checkData()方法，然后执行方法内部代码，在充值金额input文本框标签右边有一个p标签，用以展示提醒信息，如果充值金额不符合要求，则会使用$("#p1_1").html(***)把相应的提示信息放入该p标签中，在通过$(".input_text").addClass("input-red");给input文本框添加一个红色边框标识，$("#div1_1").show();用于让提示信息展示，其中id="div1_1"的标签是一个div，它包含着上述的p标签，return false;用于终止操作，并且当我们提交充值表单的时候，会先执行一次checkData()方法，根据reuturn的返回值来确定是否提交表单；如果充值金额符合要求，那就使用$(".input_text").removeClass("input-red");去除input文本框添加一个红色边框标识，并且使用$("#div1_1").hide();隐藏可能出现的提示信息，然后只有当return true;的时候才会提交表单

四、拓展延伸

上述的reg是最多只能输入两位小数的正则表达式，接下来我给大家写一个整数部分最多是18位，小数部分最多只能输入两位的正则表达式，如下所示：

var reg = /(^([0-9]{1,18})?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;