使用正規表示式處理金額

前言：

如果只想要一個最多兩位小數的正規表示式判斷，那你直接複製下面的程式碼就可以了，如下：

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])?$)/;