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

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

我这样做的唯一原因是，表单提交结果是一致的，并且易于导出到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 />

来源

2014-02-08 JefeTheTechy

在HTML5中，输入元件可以具有['pattern'属性，指定格式]（HTTP：// www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-pattern-attribute）。另一方面，你永远不应该信任客户端验证，因为它很容易被绕过，你总是需要验证服务器端的格式。 –

所以你想要两个模式应该匹配'（XXX）XXX-XXXX'和'（XXX）XXX-XXXX'？ –

苏珊，这是正确的。将该行更改为绝对没有任何作用 – JefeTheTechy

做到这一点的最简单方法是简单地使用多个字段：

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

虽然这种方法肯定是容易的，这是不是很大。用户必须按标签或点击每个字段才能输入数据，除了常识以外，什么都不能阻止他们输入数字以外的东西。

我总是觉得，验证时，用户的方式越少越好。让他们以他们喜欢的任何格式输入他们的电话号码，然后擦洗它，除去数字以外的所有内容。这样用户可以输入“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表单验证的整个列表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和.serialize;您不仅可以更好地控制UI，还可以执行所需的所有验证。但这可能超出了你现在需要做的一点。

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

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

这将覆盖到所有人群使用（时间，空间，破折号，括号）的共同变化，仍然只允许7位美国的电话号码。

这里有一个的jsfiddle展示HTML5验证和标准化：

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

我希望这有助于！

来源

2014-02-08 19:33:25

谢谢。这样的工作，但现在我得到了“请输入正确的格式”，无论我输入的字段格式如何。 – JefeTheTechy

There在我的SSN模式中是一个错字（我使用三位数字代替了四位）。我纠正了这一点，并添加了一个jsfiddle来演示它的全部工作：http://jsfiddle.net/Cj7UG/1/ –

如果您希望两个模式应按照问题进行匹配，请使用此模式。

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

来源

2014-02-08 19:29:56

下面是使用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

来源

2014-02-08 19:36:30

使用可以使用某事像这样：

<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

来源

2014-02-08 19:47:16 scripter

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

回答

相关问题