HTML 表单字段 - 如何要求输入格式答案

【问题标题】：HTML Form Field - How to require an input formatHTML 表单字段 - 如何要求输入格式
【发布时间】：2014-03-06 05:09:15
【问题描述】：

我在这里要做的是要求将电话号码作为 (XXX) XXX-XXXX 输入到我的 HTML 表单中，并且将 SS 号码输入为 XXX-XX-XXXX。而已。

我这样做的唯一原因是为了使表单提交结果一致且易于导出到 Excel。

有人告诉我使用 Javascript 来执行此操作，但也许我不够先进，无法理解执行此操作的所有步骤。

请记住我是初学者，请在这里指出正确的方向吗？

哇，非常感谢 Ethan 和 @suman-bogati！我现在几乎在那里！该字段现在弹出一个错误，说明使用正确的格式 555-55-5555。那太棒了。但无论我在该字段中输入什么，弹出窗口都会持续存在。我试过 555-55-5555 和 555555555 都没有被接受。这是该字段的 HTML：

<label>
            Social Security Number:
            <input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
                title="Expected pattern is ###-##-####" />
        </label>
</div>
    <script>$('form').on('submit', function(){
        $(this).find('input[name="SocialSecurity"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
    $(this).find('input[name="ssn"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
});</script>
    <br />

【问题讨论】：

在 HTML5 中，输入元素可以有一个pattern attribute that specifies the format。另一方面，你永远不应该相信客户端验证，因为它很容易被绕过，你总是必须在服务器端验证格式。
所以你想要两个模式应该匹配(XXX) XXX-XXXX和(XXX) XXX-XXXX?
苏珊说得对。将行更改为什么都不做。
从可用性的角度来看，这种方法都是错误的。您应该问：我可以有意义地处理哪些格式，并将它们规范化为我想要的格式，以及我如何帮助用户使用其中一些格式？解决错误的问题并不比解决正确的问题容易得多。

标签： javascript html forms field masking

【解决方案1】：

如果您希望按照问题要求匹配两个模式，请使用此模式。

//for (XXX)-XXX-XXXX
var pattern =  /^\(\d{3}\)\-\d{3}\-\d{4}$/; 

//for XXX-XXX-XXXX
var pattern2 = /^\d{3}\-\d{3}\-\d{4}$/;

DEMO

【讨论】：

【解决方案2】：

最简单的方法是使用多个字段：

<div>
    Phone:
   (<input type="text" name="phone-1" maxlength="3">)
   <input type="text" name="phone-2" maxlength="3">-
   <input type="text" name="phone-3" maxlength="4">
</div>
<div>
    SSN:
    <input type="text" name="ssn-1">-
    <input type="text" name="ssn-2">-
    <input type="text" name="ssn-3">
</div>

虽然这种方法很简单，但也不是很好。用户必须按 Tab 或单击每个字段才能输入数据，并且没有什么（除了常识）可以阻止他们输入数字以外的内容。

我一直认为，在验证方面，您越少妨碍用户越好。让他们以他们喜欢的任何格式输入他们的电话号码，然后你擦洗它，删除除数字之外的所有内容。这样用户可以输入“5555551212”或“(555) 555-1212”，但数据库将始终保存“5555551212”。

要考虑的另一件事是 HTML5 为电话号码提供了一些很好的特定类型（但不包括 SSN）。现代浏览器会处理所有输入验证，甚至更好的是，移动设备会显示数字小键盘而不是整个小键盘。

鉴于此，显示表单的最佳方式是：

<div>
    <label for="fieldPhone">Phone: </label>
    <input type="tel" id="fieldPhone" placeholder="(555) 555-1212">
</div>
<div>
    <label for="fieldSsn">SSN: </label>
    <input type="text" id="fieldSsn" name="ssn" placeholder="555-55-5555" pattern="\d{3}-?\d{2}-?\d{4}">
</div>

如果用户使用现代浏览器，这将为您处理用户端的输入验证。如果他们不这样做，您将不得不使用验证库或 polyfill。这里有 HTMl5 表单验证 polyfill 的完整列表：

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-web-forms

所以现在剩下的就是在将数据保存到数据库时对其进行规范化。

理想的地方是后端；但是，它并没有说明您的表单的去向，因此您可能对后端的处理方式没有任何发言权。因此，您可以改为在前端执行此操作。例如，使用 jQuery：

$('form').on('submit', function(){
    $(this).find('input[type="tel"]').each(function(){
        $(this).val() = $(this).val().replace(/[\s().+-]/g, '');
    });
    $(this).find('input[name="ssn"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
});

这也不是一个完美的方法：如果您在此函数中进行验证，但验证失败，用户将看到他或她的输入被标准化版本替换，这可能会令人不安。

最好的方法是使用 AJAX 和.serialize；您不仅可以更好地控制 UI，还可以进行所有您想要的验证。但这可能有点超出您现在需要做的事情。

请注意，电话验证是最棘手的。 HTML5 电话验证非常宽松，允许人们输入国际电话号码，其格式可能非常复杂。即使是美国的人有时也会输入“+1 (555) 555-1212”之类的电话号码，然后你有 8 位而不是 7 位。如果你真的想将它们限制为 7 位，你必须添加你的自己的自定义验证：

/^\(?\d{3}\)?[.\s-]?\d{3}[.\s-]\d{4}$/

这将涵盖人们使用的所有常见变体（句点、空格、破折号、括号），并且仍然只允许使用 7 位数的美国电话号码。

这是一个演示 HTML5 验证和规范化的 jsfiddle：

http://jsfiddle.net/Cj7UG/1/

我希望这会有所帮助！

【讨论】：

谢谢。这可行，但现在无论我在字段中输入哪种格式，我都会得到“请输入正确的格式”。
我的 SSN 模式中有一个错字（我在最后一位使用三位数字而不是四位）。我更正了这一点，并添加了一个 jsfiddle 来证明一切正常：jsfiddle.net/Cj7UG/1

【解决方案3】：

这是一个使用 jquery 和 jquery 工具验证器的完整解决方案：可以处理这两种情况的正则表达式模式是：

^(\d{3}-|(\d{3})\s)\d{2}-\d{4}$

HTML：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<link href="http://jquerytools.org/media/css/validator/form.css" type="text/css" rel="stylesheet">
<script>
$(function() {
    $("#myform").validator();
});
</script>
</head>
<body>
<form id="myform">
    <input type="text" name="name" pattern="^(\d{3}-|\(\d{3}\)\s)\d{2}-\d{4}$" maxlength="30" />
    <br>
    <input type="submit" name="submit" value="submit" />
</form>
</body>

Click here for demo on jsfiddle

【讨论】：

【解决方案4】：

use 可以这样使用：

<html>
<head>
</head>
<body>
<input type="text" id="ok">
<script>
document.getElementById("ok").onkeypress = function(e){
    var keycodes = new Array(0,48,49,50,51,52,53,54,55,56,57);
    var was = false;
    for(x in keycodes){
        if(keycodes[x] == e.charCode){
            was = true;
            break;
        }
        else{
            was = false;
        };
    };
    var val = this.value;
    if(was === true){
        switch(val.length){
            case 3:
                if(e.charCode !== 0){
                this.value += "-";
                }
                break;
            case 6:
                if(e.charCode !== 0){
                this.value += "-";
                }
                break;
            default:
                if(val.length > 10 && e.charCode !== 0){return false;};
                break;

        };
        val += e.charCode;
    }
    else{
        return false;
    };

};
</script>
</body>

我在ff中测试过

【讨论】：