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表格验证填充物：

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>

Click here for demo on 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 个答案: