JavaScriptで入力フィールドを検証する方法

Question

ある正規表現のパターン属性を持つ入力フィールドがある場合、その入力DOMエレメントにアクセスできるJavaScript/JQuery関数があり、その中の現在の値がパターンは？

Answer 1

あなたが使用する必要がありますHTML5 Validity Frameworkそれ用に設定検証してきた各フィールドのvalidityオブジェクトを提供します（セクション「JavaScriptを使用して検証フォーム」を確認してください）。このvalidityオブジェクトは、「有効性制約」のセット（HTML5がネイティブに提供する検証の種類ごとに1つ）を公開します。

あなたの場合、無効な要素であるかどうかを確認するには、要素のvalidity.patternMismatchをチェックします。しかし、1つのタイプの検証だけが要素に適用される場合は、validity.validで十分です。

以下、フォームフィールドには必須で、パターンが設定されています。この場合、フィールドが無効であることがわかっているだけでは不十分である可能性があるため、要素が無効かどうかを示すだけでなく、個々の制約をチェックして理由を確認できることを示します。

データを入力せずに[送信]ボタンをクリックしてみてください。それは要素が無効であることを伝えますが、制約レポートを見ると、その場合にはvalueMissing = trueが表示されます。次に2文字だけ入力してみてください。それでも無効と表示されますが、その場合はpatternMismatch = trueが表示されます。

var field = document.getElementById("ss"); 
 
var btn = document.getElementById("btnValidity"); 
 

 
btn.addEventListener("click", function(evt){ 
 

 
    console.clear(); 
 

 
    // You can test for simple validity with the valid property 
 
    console.log("Is field valid? " + ss.validity.valid); 
 
    
 
    // And, you can get more specific by checking all the validity constraints 
 
    // Here, we're just looping the entire set for demo purposes 
 
    for(var constraint in ss.validity){ 
 
    if(ss.validity[constraint]){ 
 
     console.log(constraint + " = " + ss.validity[constraint]); 
 
    } 
 
    } 
 
    
 
});

/* Valid and invalid elements can show their state in real time with CSS pseudo-classes */ 
 
input[type=text]:active, input[type=text]:focus { outline:none; } 
 
input[type=text]:valid { box-shadow:0 0 3px green; } 
 
input[type=text]:invalid { box-shadow:0 0 3px red; }

SS#: <input type="text" required pattern="^\d{3}-\d{2}-\d{4}$" id="ss" placeholder="xxx-xx-xxxx"> 
 
<button id="btnValidity">Check validity</button>

Answer 2

HTMLInputElement.checkValidity()、supported by IE 10 and later、一度にすべての制約をチェックします。

console.log(document.getElementById('a').checkValidity()) 
 
console.log(document.getElementById('b').checkValidity())

<input id="a" pattern="a+" value="aaaa" /> 
 
<input id="b" pattern="a+" value="aaba" />

Answer 3

$(function() { 
 
    var $input = $('#my-input'); 
 
     
 
    $input.on('change', function() { 
 
     var pattern = $input.attr('data-my-pattern-attr'); 
 
     var regex = new RegExp(pattern, "g"); 
 

 
     if ($input.val().match(regex)) { 
 
      console.log('matches'); 
 
     } else { 
 
      console.log('no match'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" id="my-input" data-my-pattern-attr="[a-z]+" />