使用 jQuery 强制使用表单进行某些类型的输入答案

【问题标题】：Forcing certain kinds of input with a form with jQuery使用 jQuery 强制使用表单进行某些类型的输入
【发布时间】：2011-02-02 20:22:39
【问题描述】：

我有一张表格用来填写信用卡号码。我该如何强制执行以下操作：

CC 号码为 16 位，如果从选择元素中选择 AmEx，则为 15 位

CSV 号码为 3 位，如果从选择元素中选择 AmEx，则为 4 位

billingState 的 2 位数字（因此只能是 NY、CA、NV 等）

5 位数的 billingZip

(...) ... - .... 电话号码格式

这是我的代码 - http://slexy.org/view/s2dgDx7fV9

我在页面的大部分内容中都使用了 jQuery。如何在 jQuery 中做到这一点？

谢谢！

【问题讨论】：

JavaScript。你在使用任何 JS 库吗？ MooTools、原型、jQuery..？
我已在回复中添加了 js-code。

标签： javascript jquery html forms credit-card

【解决方案1】：

我想你应该添加一些 javascript 代码。通常的 HTMl 不提供如此强大的机制来控制用户输入。

使用 jQuery 你可以像这样检查信用卡号码：

function isAmExSelected()
{
  return $("#creditCardType").val() == "American Express";
}

function containsOnlyDigits(str)
{
   return str.match(/[^0-9]/) == null;
} 

function validateCCNumber()
{
    var ccn = $("#creditCardNumber").val();
    var onlyDigits = containsOnlyDigits(ccn);
    if(isAmExSelected())
    {
       return ccn.length == 15 && onlyDigits;
    }
    else
    {
       return ccn.length == 16 && onlyDigits;
    }
}

function registerValidation(id, validateMethod, errorMethod)
{
    $(id).change(function(){
        if(validateMethod() == false)
        {
            errorMethod();
        }
    });
}

    $(document).ready(function(){
        registerValidation("#creditCardNumber", validateCCNumber, function(){alert("Error!")});
    });

您应该自己编写其他验证。

【讨论】：

我尝试使用您编写的代码，但没有结果。即使我输入了不应验证的内容，我也不会收到错误警报。这是我所有的 JS 代码：slexy.org/view/s26UsEHYHz
我混淆了“加载”和“就绪”功能。所以正确的行是“$(document).ready”。我已经编辑了我的样本。那你应该明白我的脚本没有考虑很多场景。例如，“更改”事件仅在您离开输入时触发。或者，如果您输入 16 位数的卡号，则将 Card Type 更改为 AmEx - 什么都没有发生，但应该发生。

【解决方案2】：

将您的输入绑定到 keyup 事件。此外，您可以通过第一个数字验证卡，即 4 = Visa、5 = Mastercard、3 = Amex（通常）和 6 = Discover。

$(document).ready( function(){
    $("#creditCardNumber").change(function(){
        $value = $(this).val();
        $type = $value.substr(0,1);

        if ( $type == '3' ){
            $(this).attr("maxLength", 15);
        }
        else {
            $(this).attr("maxLength", 16);
        }

        if ( $(this).attr("maxLength") < $value.length ) {
        $len = ( $(this).attr("maxLength") - 1 );
            $(this).val($value.substr(0,$len));
        }
    });
});

您可以使用 CVV 执行类似的操作，甚至可以获取卡类型的值而不是第一个数字。对于 state 和 zip，假设您只接受基于美国的地址，您可以在 HTML 中设置 maxLength 属性。至于电话号码掩码，有一个我从未使用过的 jQuery 插件，所以我不能保证它，但希望这会让你朝着正确的方向前进。

http://webdeveloperplus.com/jquery/how-to-mask-input-with-jquery/

【讨论】：

keyup 事件不考虑鼠标复制粘贴场景。
并不是说任何事件都能真正优雅地处理，但是，这个替代方案怎么样？此外，他们应该不再询问卡类型，因为他们会在输入第一个数字后立即知道。