javascript - 如何在 jQuery 自定义验证器方法中格式化消息

Question

我正在尝试编写如下自定义方法来使用 jQuery validate 验证信用卡号。

jQuery.validator.addMethod("ValidateCreditCard", function(value, element, params) {
    var selectedElement = $('input[name="CardType"]');
    var cardType = selectedElement.filter(':checked').val();
    var cardNumber = $("#CardNumber").val();
    if (cardType == "MasterCard" && !value.startsWith(5)) {
        return false;
    }
    if (cardType == "Visa" && !value.startsWith(4)) {
        return false;
    }
    return true;
}, jQuery.validator.format("Please enter a {0} card number"));

根据卡类型单选按钮选择，我想显示适当的消息。例如，如果用户选择 Visa 信用卡，则错误消息应为“请输入 Visa 卡号，同样适用于 Master 信用卡”

关于如何传递卡片类型值来格式化消息有什么想法吗？

Answer 1

你可以像下面这样做:

HTML

<form id="CHECKFORM" name="CHECKFORM">
    <div>
        <input type="radio" name="CardType" id="radioVisaCard" value="Visa" />
        <label for="MOBILE">Visa</label>
        <input type="radio" name="CardType" id="radioMasterCard" value="MasterCard" />
        <label for="MOBILE">Master</label>
        <input type="text" class="cardNumber" data-rule-validatecreditcard="true" />    
    </div>    
    <input type="submit" value="submit" />
</form>

JS

<script>    
    jQuery.validator.addMethod("ValidateCreditCard", function (value, element) {
        var selectedElement = $('input[name="CardType"]');
        var cardType = selectedElement.filter(':checked').val();
        if (cardType == "MasterCard" && !value.startsWith(5)) {
            return false;
        }
        if (cardType == "Visa" && !value.startsWith(4)) {
            return false;
        }
        return true;
    }, function (element) {
        var selectedElement = $('input[name="CardType"]');
        var cardType = selectedElement.filter(':checked').val();
        var startDigit;
        if (cardType == "MasterCard")
            startDigit = 5;
        else if (cardType == "Visa")
            startDigit = 4;
        return 'The field should be start with ' + startDigit + ' digit.'
    });

    $("#CHECKFORM").validate({
        rules: {
            url: "ValidateCreditCard",
        }
    });
</script>