Question

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

CC编号为16位，如果从选择元素

中选择AmEx，则为15位

CSV编号为3位数，如果从选择元素

中选择AmEx，则为4

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

billingZip的5位数

（...）...... - ....电话号码格式

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

我在页面的大部分时间里使用jQuery。我怎么能在jQuery中做到这一点？

谢谢！

Answer 1

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

使用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!")});
    });

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

Answer 2

将您的输入绑定到keyup事件。此外，您可以通过第一个数字验证卡，即4 = Visa，5 =万事达卡，3 =美国运通（通常），6 =发现。

$(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/

使用jQuery强制使用表单输入某些类型的输入

2 个答案: