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

Question

我想在这里做的是要求将电话号码作为 (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 />

Answer 1

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

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

希望对您有所帮助!