使用带有数字和字母的 Jquery 进行表单验证答案

【问题标题】：Form Validation using Jquery with numbers and letters使用带有数字和字母的 Jquery 进行表单验证
【发布时间】：2011-07-11 14:12:22
【问题描述】：

我正在构建测试验证，以确保输入了正确的部件号。每个部分都以大写字母 MR 开头，后跟 [SPACE]，后跟三个数字。例如( 先生 123 )

问题是如果我似乎无法弄清楚如何使用 jquery 验证这一点。

部件号始终以 MR 开头。

                var type = $("input#type").val();

                        // Check a that a tank type has been entered.
                        if( type.length < 5  && type.not().contain("MR")){

                                $("#error_upload").html("Please enter the tank number in a format MR XXX.");
                                $("#type").css({borderColor:'red'}).focus();                                    
                                $("name,#file").css({borderColor:'#ccc'});
                                return false;

                        }

任何帮助都会很棒。

【问题讨论】：

标签： jquery forms validation input

【解决方案1】：

我建议使用正则表达式。

if (type.match(/^MR\s[0-9]{3}$/){
...
}

基本上，它会查找 MR，然后是空格 (\s)，然后是 3 个数字 ([0-9]{3})。如果出现其他任何内容，它将返回 false。

【讨论】：

这将报告为正确的if the inputted value is abcMR 123。更新：在我发布之前你已经编辑过了。 :)
我在 18 分钟前编辑过它？你在 14 分钟前发布了这个。但是谢谢：P
显然，我没有重新加载页面。 :)

【解决方案2】：

if (/^MR \d{3}$/.test(subject)) {
    // Correct tank number format
} else {
    // Incorrect tank number format
}

这将确保输入的值始终只有 MR + [SPACE] + 3 digits 并且仅此而已。

【讨论】：

【解决方案3】：

你可以去这里有几条路线。

继续以这种方式编写您的验证

您可能希望您的代码如下所示

var type = $("input#type").val();

// Check a that a tank type has been entered.
if(!/^MR \d{3}$/.test(type)){

    $("#error_upload").html("Please enter the tank number in a format MR XXX.");
    $("#type").css({borderColor:'red'}).focus();                                    
    $("name,#file").css({borderColor:'#ccc'});
    return false;

}

将上述内容集成到 jQuery Validate 中，因为我假设您需要在其他地方进行验证

通过只允许 3 位数字并在 'MR ' + type 上附加来简化输入，因为每个都需要 MR 和一个空格，为什么还要要求用户输入呢？

var num = $("input#type").val()
,   type;

// Check a that a tank type has been entered.
if(!/^\d{3}$/.test(num)){

    $("#error_upload").html("Please enter the tank number with only digits.");
    $("#type").css({borderColor:'red'}).focus();                                    
    $("name,#file").css({borderColor:'#ccc'});
    return false;

}
else {
    type = 'MR ' + num;
}

合并第 2 步和第 3 步，这将导致输入类似于 <input type="text" class="required digits" maxlength="3" minlength="3" />。这导致数据输入不太复杂，并且不必担心简单的验证逻辑。这是我最喜欢的选择。
一开始就使用输入掩码来防止用户犯任何错误，但它是最“侵入性”的。

【讨论】：