将表单输入限制为 16 位数字答案

【问题标题】：Restricting form input to a 16-digit number将表单输入限制为 16 位数字
【发布时间】：2013-08-21 13:15:51
【问题描述】：

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

我现在正在使用：

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

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

【问题讨论】：

你在哪里检查数字？
您所做的只是检查输入的值是否不是空字符串...所以您的代码按设计工作！
这只是检查是否为空。阅读：stackoverflow.com/questions/4514430/…
可能重复：stackoverflow.com/questions/18104094/…
@NabilKadimi 但是你是怎么做到的，所以你只需输入一个数字，限制是 16？猜我的谜。

标签： jquery validation if-statement

【解决方案1】：

您可以使用单个输入，设置最大长度，这将只允许在文本框中输入 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组方式的代码。

【讨论】：

您可以通过添加 pattern 属性来改进 HTML 以适应现代浏览器。
你能提供一个小提琴吗？
我已经复制并粘贴了代码，但我看不到应该发生什么。你能解释一下吗？
忘记在正则表达式检查前添加!，并且出现语法错误，重新编辑答案以修复。 first fiddle,second fiddle，在第一个示例中 ccn.length < 16 || !/[0-9]{16}/.test(ccn) 表示如果输入少于 16 个字符或者不是所有字符都是数字，在第二个示例中，它会抓取四个输入框中的每一个并检查是否所有 4 个长度为 4 个字符，是数字

【解决方案2】：

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

$(document).ready(function () {

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

jsfiddle here

【讨论】：

【解决方案3】：

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

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

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

查看jsfiddle

【讨论】：

似乎不是所有浏览器都支持这个，特别是firefox似乎根本不支持这个，caniuse.com/input-number
我的 Firefox 支持得很好，我在 v.23.0.1
嗯，那肯定是sites db过时了
抱歉我的错误 - Firefox 支持模式，type='number' 不支持。 type='number' 在我的回答中是多余的，您可以将其省略（对于 Firefox）

【解决方案4】：

如果你只关心验证是否都是数字，请看这个小提琴：http://jsfiddle.net/y7sf4/

它使用这个功能：

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

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

看看http://jquerycreditcardvalidator.com/

【讨论】：

我尝试了验证器，但它对我不起作用。您提出的代码也不起作用。

【解决方案5】：

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

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

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

【讨论】：