1. 程式人生 > >jquery validate 比較兩個input輸入框的值的大小

jquery validate 比較兩個input輸入框的值的大小

好久沒有寫前臺了,專案現在是這個需要,就用了jquery validate控制元件

html程式碼如下:

<th><label for="amountRangeStart">發生額</label></th>
<td>
<s:textfield name="search.amountRangeStart"  size="10" id="amountRangeStart" />--
<s:textfield name="search.amountRangeEnd" size="10" id="amountRangeEnd"/>
<span id="amountRangeCheckHf"></span>
</td>

jquery程式碼:



/**
* 資料校驗
*/
$(function (){
jQuery.validator.addMethod("amountLimit", function(value, element) {  
var returnVal = false;  
var amountStart = $("#amountRangeStart").val();
var amountEnd = $("#amountRangeEnd").val();
if(parseFloat(amountEnd)>parseFloat(amountStart)){
returnVal = true;
}
return returnVal;   
},"結束金額必須大於開始金額");    
$("#cxtj_form").validate({
rules:{ 
'search.amountRangeStart':{ maxlength: 16,number:true}, 
'search.amountRangeEnd': { maxlength: 16,number:true,amountLimit:true }
}, 
messages:{
"search.amountRangeStart": {number:"請輸入正確的金額"},
"search.amountRangeEnd":{number:"請輸入正確的金額"}
}
}); 
});

這樣寫好像大體上能滿足要求,但是我前面是自己寫了函式,但是一直時靈時不靈,不知道哪兒出了問題:


$(function (){
$("#amountRangeStart").on("keyup",function(){
var valid = /^\d{0,}(\.\d+)?$/i.test(this.value),val = this.value;
if(!valid){
$("#tradeAmtCheckHf").text( "起始金額輸入只能是數字" );
$( "#tradeAmtCheckHf" ).css({"color": "red"});
}else{
$("#tradeAmtCheckHf").text("");
}
});
$("#amountRangeEnd").on("keyup",function(){
var valid = /^\d{0,}(\.\d+)?$/i.test(this.value),val = this.value;
if(!valid){
$("#tradeAmtCheckHf").text( "起始金額輸入只能是數字" );
$( "#tradeAmtCheckHf" ).css({"color": "red"});
}else{
$("#tradeAmtCheckHf").text("");
}
var tradeAmt_start = $("#amountRangeStart").val();
var tradeAmt_end = $("#amountRangeEnd").val();
if(tradeAmt_start>tradeAmt_end){
$("#tradeAmtCheckHf").text( "結束金額必須大於開始金額" );
$( "#tradeAmtCheckHf" ).css({"color": "red"});
}else{
$("#tradeAmtCheckHf").text("");
}
});
});

希望各位能人志士幫我解惑。。。。