具有2个模式的html输入模式答案

【问题标题】：html input pattern with 2 patterns具有2个模式的html输入模式
【发布时间】：2017-02-23 14:37:07
【问题描述】：

是否可以有一个带有 2 个选项的输入模式？

例如。我有一个用户输入分机号码（4 位）的字段，例如。 7483 但有些人有 2 个扩展，例如。 7483 / 7542

有没有办法将输入模式设置为 4 个字符或 11 个字符？否则显示错误信息？

这是我目前所拥有的：

Extension:<br><input type="text" name="extension" required
pattern= "{4}" title="Please Enter the Extension Number/s"><br />

【问题讨论】：

你可以用正则表达式来实现。
在我研究之前从未使用过正则表达式，谢谢！
欢迎您。有一个非常有用的用于表单验证的开源库，名为jQuery Form Validator。确保检查并仔细阅读。对于您的特殊情况，您需要write custom validator。
这样吗？ \w{4}|\w{11}
不错的快速尝试！但那是错误的。多尝试一点。如果您找不到合适的图案，我会发给您。但它更好地阅读和思考更多伙计！

标签： javascript jquery html forms validation

【解决方案1】：

您可以使用jQuery Form Validator lib 并为其编写自定义验证器。对于验证，您应该使用/^\d{4}( \/ \d{4})?$/ 模式。

这是完整的解决方案。仔细阅读并坚持使用 RegExp！ ;-)

<!DOCTYPE html>
<html>
<head>
    <title>Custom Validation</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form action="" method="post">
        Extension:<br />
        <input type="text" name="extension" required
               data-validation="custom" data-validation-regexp="^\d{4}( \/ \d{4})?$" title="Please Enter the Extension Number/s"><br />
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
    <script>
        // Setup form validation
        $.validate();
    </script>
</body>

【讨论】：

您不需要 jQuery 或插件。只需将正则表达式 ^\d{4}( \/ \d{4})?$ 输入到 pattern 属性中，HTML5 就会负责验证。
TY。我的目标是介绍上面提到的库。它有许多有用的验证功能。
好吧，在那种情况下，实际上有一个regex validator built in :)。
@MikeMcCaughan 回答更新老兄！
谢谢你们是摇滚明星 :D

【解决方案2】：

您可以尝试以下方法。

<input type="text" name="extension" required pattern=".{4}|.{11}" title="Please Enter the Extension Number/s">

https://jsfiddle.net/37ohqswp/

【讨论】：

【解决方案3】：

我认为最好的方法是使用正则表达式匹配、按键事件侦听器和替换。请参阅下面的建议答案。另外，我把代码放在https://jsfiddle.net/8p590mhq/上进行测试。希望这会有所帮助。

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ext</title>
 </head>
 <body>
   <div>
     Extension:<br>
     <input type="text" id="extension" name="extension" placeholder="Please enter phone ext's" required>
   </div>
   <!-- JavaScript file include -->
   <script type="text/javascript" src="js.js"></script>
 </body>
</html>

//ammend field function
let ammend_field = () => {
 //get element by id
 let ext = document.getElementById("extension");

 //use regex match to replace ext.value input field
 //original answer from:
 //http://stackoverflow.com/questions/17260238/how-to-insert-space-every-4-characters-for-iban-registering
 ext.value = ext.value.replace(/[^\d0-9]/g, '').replace(/(.{4})/g, '$1 / ').trim();
}

//add event listener to submit button
document.getElementById("extension").addEventListener("keypress", ammend_field);

【讨论】：