Question

是否可以使用2个选项的输入模式？

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

有没有办法设置输入模式，因此它可以是4个字符或11个？否则会显示错误消息？

这是我到目前为止所做的：

Answer 1

您可以使用jQuery Form Validator lib＆amp;为它编写自定义验证器。要进行验证，您应使用/^\d{4}( \/ \d{4})?$/模式。

这是完整的解决方案。彻底阅读＆amp;坚持使用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>

Answer 2

我认为最好的方法是使用正则表达式匹配，按键事件监听器和替换。请参阅下面的建议答案。另外，我已将代码放在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>

JS

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

Answer 3

您可以尝试以下操作。

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

https://jsfiddle.net/37ohqswp/

html输入模式有2种模式

3 个答案: