Question

我使用Payment.js插件来格式化和验证信用卡输入字段。我需要在keyup / focusout上验证客户端，并在服务器提交后再次返回错误消息。我希望错误样式特定于无效的字段。我的代码按照我想要的方式工作，但我希望它更有效/简洁。非常感谢任何建议！

$(function() {
    // Initiate payment.js plugin
    $('.cc-num').payment('formatCardNumber');
    $('.cc-exp').payment('formatCardExpiry');
    $('.cc-cvc').payment('formatCardCVC');

    // Toggle error styling
    $toggleErrorStyling = function(el, erred) {
        var inputContainer = $(el).parents('.input-container');
        if (erred) {
            inputContainer.addClass('has-error').removeClass('has-success');
        } else {
            inputContainer.removeClass('has-error').addClass('has-success');
        }
    };

    // Validate each form field
    $('.paymentInput').bind('focusout', function() {
        var valid,
            erred = function(valid) {},
            $hdnCCType = $('input[id$="hdnCCType"]'),
            $cardType = $.payment.cardType($('.cc-num').val()),
            $errorMsg = $('.alert-danger');

        if ($(this).hasClass('cc-num')) {
            valid = $.payment.validateCardNumber($(this).val());
            if (valid) {
                $hdnCCType.val($cardType); // set the hidden value to post back to the Server
            }
        } else if ($(this).hasClass('cc-exp')) {
            // validate expiry date
            valid = $.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal'));
        } else if ($(this).hasClass('cc-cvc')) {
            //validate security code
            valid = $.payment.validateCardCVC($('.cc-cvc').val(), $cardType);
        }

        $errorMsg.hide();
        erred(valid);
        $toggleErrorStyling(this, !valid);
    });

    // After form submit,
    // if .alert-danger is visible on the page,
    // validate all three inputs,
    // but return error styling only on the invalid ones,
    // and ignore hash marks on browser back from verify ?edit=T
    if ($(".alert-danger").is(":visible")) {
        var $cardType = $.payment.cardType($('.cc-num').val());

        if (!$.payment.validateCardNumber($('.cc-num').val())) {
            $toggleErrorStyling($('.cc-num'), true);
        } else {
            $toggleErrorStyling($('.cc-num'), false);
        }

        if (!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal'))) {
            $toggleErrorStyling($('.cc-exp'), true);
        } else {
            $toggleErrorStyling($('.cc-exp'), false);
        }

        if (!$.payment.validateCardCVC($('.cc-cvc').val(), $cardType)) {
            $toggleErrorStyling($('.cc-cvc'), true);
        } else {
            $toggleErrorStyling($('.cc-cvc'), false);
        }
    }
});

Answer 1

以下是有关如何使代码更简洁的一些想法：

1）将if (cond) do(true) else do(false)模式替换为do(cond)模式

所以在$toggleErrorStyling函数中执行：

inputContainer.addClass('has-error').toggleClass('has-success', !erred);

在if ($(".alert-danger").is(":visible"))区块中执行：

$toggleErrorStyling($('.cc-num'), !$.payment.validateCardNumber($('.cc-num').val()));
$toggleErrorStyling($('.cc-exp'), !$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
$toggleErrorStyling($('.cc-cvc'), !$.payment.validateCardCVC($('.cc-cvc').val(), $cardType));

2）使用三元运算符代替if (a) value = x else if (b) value = y else value = z模式：value = a ? x : b ? y : z

所以分配给value如下：

valid = $(this).hasClass('cc-num')
    // set the hidden value to post back to the Server
    ? $.payment.validateCardNumber($(this).val()) && $hdnCCType.val($cardType)
    : $(this).hasClass('cc-exp')
        // validate expiry date
        ? $.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal'))
        // *** cc-cvc is only possible class left, so no need to test it
        //validate security code
        : $.payment.validateCardCVC($('.cc-cvc').val(), $cardType);

由于&&可以产生非布尔值的truthy值，您可能需要将调用更改为erred，以便真正传递布尔值：

erred(!!valid);

由于该功能的实施是空的，我不知道你是否真的需要这个改变。

更简洁的jQuery if / else用于输入验证

1 个答案: