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/

我希望这有帮助!