Question

我正在构建付款表单并使用jQuery验证来执行我的验证。如果它有2位小数，我怎么才能验证“付款金额”字段？如果用户在金额上取消.00，我希望它失败。

这是我的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>

提前致谢！

Answer 1

可能现在回答为时已晚，但这可以帮助某人。

请检查此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

Answer 2

您必须使用.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.
    });

});

否则，要验证＆＃34;美元和美分＆＃34;，您可能需要使用currency已经属于the additional-methods.js file的方法。它验证两个小数位，您可以切换符号。

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

DEMO 2：jsfiddle.net/jz5xLeu1/

使用jQuery验证在文本输入中需要2个小数位

2 个答案: