jquery - 将表单输入限制为 16 位数字

Question

这是小提琴。我正在努力做到这一点，因此当您输入信用卡号时，它只能是 16 位数字。

现在我正在使用：

var i = $('#input1').val();
var ii = $('#input2').val();
var iii = $('#input3').val();
var iiii = $('#input4').val();
if (i !== "" && ii !== "" && iii !== "" && iiii !== '') {

但这允许它是字母、符号或数字。

Answer 1

如果您只关心验证是否都是数字，请参阅此小提琴：http: //jsfiddle.net/y7sf4/

它使用这个功能：

function IsNumeric(input)
{
    return (input - 0) == input && (input+'').replace(/^\s+|\s+$/g, "").length > 0;
}

但实际上，您应该尝试完全验证信用卡的方法，而不仅仅是 16 位数字。

看看http://jquerycreditcardvalidator.com/

Answer 2

你可以在 HTML(5) 中做到这一点，它很简单：

<input type='number' pattern='.{16}' />

请注意，并非所有浏览器都支持type='number'，或者pattern尽管我相信所有主要浏览器的最新版本都支持。

在jsfiddle检查一下

Answer 3

您可以使用此函数检查每个值以确保它是数字，这是我可能会做的：

function isNumber(val) {
return !isNaN(val - 0) && val != null;
}

或者，如果你想变得非常花哨，你总是可以阅读正则表达式，并使用 javascripts 正则表达式函数...... http://www.regular-expressions.info/creditcard.html

Answer 4

使用JQuery Mask Plugin ...然后在您的代码中，您可以使用此功能将所有字段设置为仅接受数字：

$(document).ready(function () {

    ...
    $("#input4").mask("9999 9999 9999 9999");
});

jsfiddle在这里

Answer 5

您可以使用单个输入，设置最大长度，这将只允许将 16 个字符放入文本框中。然后只需测试长度，并且所有字符都是 javascript 的数字。

HTML

<input type="text" name="ccn" maxlength="16" id="ccn">

Javascript

var ccn = $('#ccn').val();
//Test the length, and use a regex to test 
//that there are 16 numbers
if( ccn.length < 16 || !/[0-9]{16}/.test(ccn) ) {
   //Invalid credit card number do error code here
}

或与您的分组输入保持一致，将每个框的 maxlength 设置为 4 并测试每个框的长度和有效数字

HTML

<input type="text" name="ccn1" maxlength="4" id="ccn1">
<input type="text" name="ccn2" maxlength="4" id="ccn2">
<input type="text" name="ccn3" maxlength="4" id="ccn3">
<input type="text" name="ccn4" maxlength="4" id="ccn4">

Javascript

function is_ccnGroup(group) {
    if( group.length < 4 || !/[0-9]{4}/.test(group) ) {
       return false;
    }

    return true;    
}

if( is_ccnGroup($('#ccn1').val()) &&
    is_ccnGroup($('#ccn2').val()) &&
    is_ccnGroup($('#ccn3').val()) &&
    is_ccnGroup($('#ccn4').val()) ) {
    // All the groups seem to be valid
} else {
   //One or more of the groups are invalid
}

可能也可以使用jquery的.map功能来减少4组方式的代码。