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

Question

我想在这里做的是要求将电话号码输入我的HTML表格（XXX）XXX-XXXX，并将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 ; 您不仅可以更好地控制用户界面，还可以进行所需的所有验证。 但这可能超出了你现在需要做的事情。

请注意，手机验证是最棘手的。 HTML5手机验证是非常宽松的，允许人们输入国际电话号码，这可能有相当复杂的格式。 即使美国人有时会输入“+1（555）555-1212”这样的电话号码，然后你有8位而不是7位。如果你真的想把它们限制在7位数，你就必须添加你的自定义验证：

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

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

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

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

我希望这有帮助！

Answer 2

如果您希望两个模式匹配，请使用此模式。

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

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

点击这里查看jsfiddle的演示

Answer 4

使用可以像这样使用：

<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测试了它

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

问题描述

4 个解决方案

解决方案1
11 已采纳 2014-02-08 19:33:25

解决方案2
1 2014-02-08 19:29:56

解决方案3
0 2014-02-08 19:36:30

解决方案4
0 2014-02-08 19:47:16

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

问题描述

4 个解决方案

解决方案1 11 已采纳 2014-02-08 19:33:25

解决方案2 1 2014-02-08 19:29:56

解决方案3 0 2014-02-08 19:36:30

解决方案4 0 2014-02-08 19:47:16

解决方案1
11 已采纳 2014-02-08 19:33:25

解决方案2
1 2014-02-08 19:29:56

解决方案3
0 2014-02-08 19:36:30

解决方案4
0 2014-02-08 19:47:16