入力パターンに2つのオプションを付けることはできますか？2パターンのhtml入力パターン
たとえば、 私は、ユーザーが内線番号（4桁）を入力するフィールドを持っています。 7483 BUT 一部の人は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の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。私の目標は、上記のlibを導入することでした。検証には多くの便利な機能があります。 – NDFA
その場合、実際には[regexバリデーターが組み込まれています]（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>
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);
あなたは正規表現でそれを達成することができます。 – NDFA
Regexを調べる前にRegexを使用したことはありませんでした。 – RedZ
歓迎します。 [jQuery Form Validator]（http://www.formvalidator.net/）という名前のフォーム検証用の非常に便利なオープンソースライブラリがあります。それを確認して徹底的に読んでください。特別な場合は、[カスタムバリデータを書き込む]必要があります（http://www.formvalidator.net/#custom-validators）。 – NDFA