Thuộc tính pattern của Input Password trong HTML DOM

Thuộc tính pattern của HTML DOM Input Password được sử dụng để thiết lập hoặc trả về thuộc tính pattern của trường nhập mật khẩu. Nó kiểm tra mật khẩu đối chiếu với biểu thức chính quy được chỉ định bởi thuộc tính pattern.

Cú pháp

Cú pháp để thiết lập thuộc tính pattern:

passwordObject.pattern = regexp

Ở đây, regexp là biểu thức chính quy để kiểm tra trường mật khẩu.

Ví dụ

Ví dụ minh họa cho thuộc tính pattern của Input Password:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính pattern của Input Password</h1> 
<p>Mật khẩu có thể là 3 ký tự số hoặc 6 ký tự chữ cái từ a đến g</p> 
<form action="/Sample_page.php"> 
Mật khẩu: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Ba ký tự số hoặc 6 ký tự chữ a-g"> 
<input type="submit"> 
</form> 
<br> 
<button onclick="passPattern()">LẤY PATTERN</button> 
<p id="Sample"></p> 
<script> 
    function passPattern() { 
        var P = document.getElementById("PASS").pattern; 
        document.getElementById("Sample").innerHTML ="Giá trị thuộc tính pattern là: "+ P; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhập mật khẩu không khớp với regex trong thuộc tính pattern:

Khi nhấn nút LẤY PATTERN:

Trong ví dụ trên:

Chúng ta đã tạo phần tử input type password với id="PASS", name="passW" và pattern="[0-9]{3}|[a-g]{6}". Giá trị pattern là một regex chỉ định bạn có thể nhập 3 ký tự số HOẶC 6 ký tự chữ từ a đến g. Nếu đầu vào không khớp regex này, giá trị thuộc tính title sẽ hiển thị trên ô nhập. Trường mật khẩu này nằm trong form với action="/Sample_page.php" - nơi dữ liệu form sẽ được gửi khi nhấn submit:

<form action="/Sample_page.php"> Mật khẩu: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Ba ký tự số hoặc 6 ký tự chữ a-g"> <input type="submit"> </form>

Chúng ta tạo nút LẤY PATTERN sẽ thực thi phương thức passPattern() khi được nhấn:

<button onclick="passPattern()">LẤY PATTERN</button>

Phương thức passPattern() sử dụng getElementById() để lấy trường nhập mật khẩu và lấy thuộc tính pattern, trả về regex dạng chuỗi. Chuỗi regex được gán cho biến P và hiển thị trong đoạn văn id="Sample" qua innerHTML:

function passPattern() { 
    var P = document.getElementById("PASS").pattern; 
    document.getElementById("Sample").innerHTML ="Giá trị thuộc tính pattern là: "+ P; 
}