在jQuery驗證的文本輸入中需要2位小數

我正在構建付款表單並使用jQuery驗證來執行我的驗證。只有當它有2個小數位時，我如何驗證「付款金額」字段？如果用戶在金額上減去.00，我希望它失敗。在jQuery驗證的文本輸入中需要2位小數

這裏是我的javascript：

$(document).ready(function() { 

    $('#payment-form').validate({ // initialize the plugin 
     rules: { 
      order_id: { 
       required: true 
      }, 
      price: { 
       required: true, 
       number: true 
      } 
     }, 
     messages: { 
      order_id: "Please enter your Invoice Number", 
      price: "Please enter Payment Amount" 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
      //form.submit(); 
     } 
    }); 

    $('#price').keypress(function(event) { 
     if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) { 
      event.preventDefault(); 
     } 
     if( ($(this).val().indexOf('.') != -1) && ($(this).val().substring($(this).val().indexOf('.'),$(this).val().indexOf('.').length).length>2)  ){ 
      event.preventDefault(); 
     } 
    }); 

});

而我的HTML：

<form id="payment-form" class="user-forms" method="post"> 
    <p class="invoice"> 
    <label for="order_id">Invoice Number<font color="red" title="This field is marked as required by the administrator.">*</font></label> 
    <input class="text-input" name="order_id" type="text" id="order_id" value=""> 
    </p> 
    <p class="payment"> 
    <label for="price">Payment Amount<font color="red" title="This field is marked as required by the administrator.">*</font></label> 
    <input class="text-input" name="price" type="text" id="price" value=""> 
    <span class="wppb-description-delimiter">You must enter an amount to 2 decimal places (i.e. 19.00)</span> 
    </p> 
    <hr/> 
    <p class="form-submit"> 
    <input type="hidden" name="cust_id" value="<?php echo $current_user->user_firstname . ' ' . $current_user->user_lastname; ?>"> 
    <input type="hidden" name="email" value="<?php echo $current_user->user_email; ?>"> 
    <input name="finalize_payment" type="submit" id="finalize_payment" class="submit button btn btn-blue" value="Finalize Payment"> 
    </p> 
</form>

提前感謝！

來源

2014-04-04 Kevin Haag

可能重複[如何驗證在jQuery的錢]（http://stackoverflow.com/questions/21017867/how- jQuery的 – Barmar

@Barmar，這個問題沒有解釋如何將它整合到使用jQuery Validate的解決方案中。 – Sparky

第二個答案顯示瞭如何創建一個新的驗證方法'money'。 – Barmar

您必須使用.addMethod()方法創建自定義規則。

jQuery.validator.addMethod("dollarsscents", function(value, element) { 
    return this.optional(element) || /^\d{0,4}(\.\d{0,2})?$/i.test(value); 
}, "You must include two decimal places");

DEMO：http://jsfiddle.net/w62Fb/

$(document).ready(function() { 

    jQuery.validator.addMethod("dollarsscents", function(value, element) { 
     return this.optional(element) || /^\d{0,4}(\.\d{0,2})?$/i.test(value); 
    }, "You must include two decimal places"); 

    $('#payment-form').validate({ // initialize the plugin 
     rules: { 
      order_id: { 
       required: true 
      }, 
      price: { 
       required: true, 
       number: true, 
       dollarsscents: true 
      } 
     }, 
     // other options, etc. 
    }); 

});

否則，以驗證「金錢」，你可能想使用currency方法這已經是the additional-methods.js file一部分。它驗證兩位小數，你可以切換符號。

price: { 
    required: true, 
    currency: ['$', false] // false = dollar symbol not required 
}

DEMO 2：jsfiddle.net/jz5xLeu1/

來源

2014-04-04 22:27:16 Sparky

這是做到這一點的最佳方式。使用jQuery驗證的自定義規則 –

可能是太晚了回答，但是這可能幫助別人。

請檢查該Jsfiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="number"/> 

$('.number').keypress(function(event) { 
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && 
    ((event.which < 48 || event.which > 57) && 
     (event.which != 0 && event.which != 8))) { 
    event.preventDefault(); 
    } 

    var text = $(this).val(); 

    if ((text.indexOf('.') != -1) && 
    (text.substring(text.indexOf('.')).length > 2) && 
    (event.which != 0 && event.which != 8) && 
    ($(this)[0].selectionStart >= text.length - 2)) { 
    event.preventDefault(); 
    } 
});

該解決方案是從JQuery allow only two numbers after decimal point

的

來源

2016-02-24 05:02:29

在jQuery驗證的文本輸入中需要2位小數

回答

相關問題