html輸入模式與2模式

是否有可能有2個選項的輸入模式？html輸入模式與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 />

來源

2017-02-23 RedZ

你可以用正則表達式實現它。 – NDFA

從未使用正則表達式之前，我會看看它謝謝你！ – RedZ

我歡迎。對於名爲[jQuery Form Validator]（http://www.formvalidator.net/）的表單驗證有一個非常有用的開源庫。請務必檢查並閱讀徹底。對於你的特殊情況，你需要[編寫自定義驗證器]（http://www.formvalidator.net/#custom-validators）。 – NDFA

您可以使用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>

來源

2017-02-23 15:14:30 NDFA

你不需要jQuery或插件。只需在'pattern'屬性中輸入正則表達式'^ \ d {4}（\/\ d {4}）？$'並且HTML5負責驗證。 –

TY。我的目標是介紹提到的lib。它有許多有用的驗證功能。 – NDFA

那麼，在這種情況下，實際上有一個[內置正則表達式驗證器]（http://www.formvalidator.net/#default-validators_custom）:)。 –

我認爲最好的辦法是使用正則表達式匹配，按鍵事件偵聽器和更換。請參閱下面的建議答案。另外，我已將代碼放在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);

來源

2017-02-23 16:54:07

html輸入模式與2模式

回答

相關問題