HTML表单字段 - 如何要求输入格式 [英] HTML Form Field - How to require an input format

问题描述

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

我这样做的唯一原因是，表单提交结果是一致的并且容易导出到Excel。

我被告知要使用Javascript来做到这一点，但也许我没有足够的先进的理解所有的步骤。

有人可以请我指出正确的方向在这里记住，我是一个初学者？

哇非常感谢你Ethan和@ suman-bogati！我几乎在那里！该字段现在会弹出一个错误消息，指出使用正确的格式555-55-5555。那很棒。但是不管我输入什么内容进入该字段，弹出窗口仍然存在。我试过555-55-5555和555555555，都不被接受。这是该字段的HTML：

 < label> 
社会保险号码：
< input id =ssnrequired pattern =^ d {3} -d {2} -d {4} $
 title =预期模式是###  -  ##  -  ####/> 
< / label> 
< / div> $（'form'）。on（'submit'，function（）{
 $（this）.find（'input [name =SocialSecurity]'）。each（
< script&替换（/  -  / g，''）; 
}）; 
 $（$） this）.find（'input [name =ssn]'）。each（function（）{
 $（this）.val（）= $（this）.val（）。replace（/  -  / g，''）; 
}）; 
}）;< / script> 
< br /> 
  

解决方案

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

 < div> 
电话：
（< input type =textname =phone-1maxlength =3>）
< input type =textname =phone -2maxlength =3>  -  
< input type =textname =phone-3maxlength =4> 
< / div> 
< div> 
 SSN：
< input type =textname =ssn-1>  -  
< input type =textname =ssn-2>  - 
< input type =textname =ssn-3> 
< / div> 
  

尽管这种方法确实很简单，但并不是很好。用户必须按Tab或点击每个字段才能输入数据，除了常识以外，什么都不能阻止他们输入数字以外的东西。

我总是觉得，在验证方面，用户的方式越少越好。让他们以他们喜欢的任何格式输入他们的电话号码，然后擦洗它，除去数字以外的所有内容。这样用户可以输入5555551212或（555）555-1212，但数据库将始终保持为5555551212。

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

因此， best> 显示您的表单的方式是这样的：

 < div> 
< label for =fieldPhone>电话：< / label> 
< input type =telid =fieldPhoneplaceholder =[phone]> 
< / div> 
< div> 
< label for =fieldSsn> SSN：< / label> 
< input type =textid =fieldSsnname =ssnplaceholder =555-55-5555pattern =\d {3}  - ？\d {2}  - ？ \d {4}> 
< / div> 
  

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

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和。序列;您不仅可以更好地控制UI，还可以执行所需的所有验证。但是，这可能超出了你现在需要做的一点。

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

  / ^ \（？\ {3} \）？[。\s- ]？\d {3} [。\s-] \d {4} $ / 
  

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

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

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

我希望这有助于！

What I want to do here is require that phone numbers be entered into my HTML form as (XXX) XXX-XXXX and that SS Numbers are entered as XXX-XX-XXXX. Thats it.

The only reason I am doing this is so that the form submission results are consistent and easy exported to Excel.

I have been told to use Javascript to do this but perhaps I am not advanced enough to understand all the steps in doing that.

Can someone please point me in the right direction here keeping in mind that I am a beginner?

Wow thank you so much Ethan and @suman-bogati! I am ALMOST there now! The field now pops an error stating to use the correct format of 555-55-5555. Thats great. But no matter what I enter enter into that field the popup persists. I tried 555-55-5555 and also 555555555 and neither are accepted. Here is the HTML for that field:

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

解决方案

The easiest way to do that is by simply using multiple fields:

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

While this approach is certainly easy, it's not great. The user has to press tab or click on each field to enter the data, and there's nothing (other than common sense) from preventing them from entering things other than digits.

I always feel that, when it comes to validation, the less you can get in the user's way, the better. Let them enter their phone number in whatever format they like, then you scrub it, removing everything but digits. That way the user can enter "5555551212" or "[phone]", but the database will always hold "5555551212".

The other thing to consider is that HTML5 offers some nice specific types for phone numbers (but not SSNs). A modern browser will take care of all the input validation and, even better, mobile devices will show the numeric keypad instead of the whole keypad.

Given that, the best way to display your form is this:

<div>
    <label for="fieldPhone">Phone: </label>
    <input type="tel" id="fieldPhone" placeholder="[phone]">
</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>

If the user has a modern browser, this will handle the user side of the input validation for you. If they don't, you'll have to use a validation library or polyfill. There's a whole list of HTMl5 form validation polyfills here:

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

So all that remains is now to normalize your data when you save it to the database.

The ideal place to do that would be the back end; it doesn't say where your form is going, though, so maybe you don't have any say on how things are processed on the back end. So you can do this in the front end instead. For example, using 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, '');
    });
});

This is not a perfect approach either: if you do validation in this function, and the validation fails, the user will see his or her input replaced by the normalized versions, which can be disconcerting.

The best approach would be to use AJAX and .serialize; not only can you have better control over the UI, but you can do all the validation you want. But that's probably a little beyond what you need to do right now.

Note that phone validation is the trickiest. The HTML5 phone validation is very permissive, allowing people to enter international phone numbers, which can have pretty complicated formats. Even people in the US will sometimes enter phone numbers like "[phone]", and then you have 8 digits instead of 7. If you really want to restrict them to 7 digits, you'll have to add your own custom validation:

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

This will cover all the common variations people use (periods, spaces, dashes, parentheses), and still allow only 7-digit US phone numbers.

Here's a jsfiddle demonstrating the HTML5 validation and normalization:

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

I hope this helps!

这篇关于HTML表单字段 - 如何要求输入格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！