如何驗證輸入欄用JavaScript

Question

如果我有一個輸入域和用於某個正則表達式模式屬性，是否有可訪問輸入DOM元素，並且如果在其當前值符合驗證一個JavaScript/JQuery的功能與模式？

Answer 1

您將需要使用HTML5 Validity Framework（檢查節「使用JavaScript驗證表單」），它提供了一個validity對象爲已確認爲它設置每個字段。這個validity對象公開了一組「有效性約束」（HTML5本身提供的每種驗證類型）。

在你的情況，你要檢查validity.patternMismatch的元素，看它是否是無效的。但是，只有一種類型的驗證應用於元素validity.valid就足夠了。

下面，我們有一個表單字段是必需的和已建立的一種模式。在這種情況下，知道該字段無效可能不足以達到您的目的，因此代碼不僅會告訴您該元素是否無效，而且會顯示您可以檢查個別約束以瞭解其原因。

儘量不要輸入任何數據，並點擊提交按鈕。這會告訴你這個元素是無效的，但是如果你看一下約束報告，你會在那種情況下看到valueMissing = true。然後嘗試輸入幾個字符，您仍然會看到它顯示爲無效，但在此情況下將顯示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]+" />