Thuộc tính mẫu Mật khẩu đầu vào HTML DOM được sử dụng để thiết lập hoặc trả về thuộc tính mẫu của trường mật khẩu đầu vào. Nó kiểm tra mật khẩu với một biểu thức chính quy được chỉ định bởi thuộc tính mẫu.
Cú pháp
Sau đây là cú pháp cho
Đặt thuộc tính mẫu -
passwordObject.pattern = regexp
Ở đây, regexp là một biểu thức chính quy dùng để kiểm tra trường mật khẩu.
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính mẫu mật khẩu -
<!DOCTYPE html>
<html>
<body>
<h1>Input Password pattern property</h1>
<p>The password can either be of three numeric characters or 6 alphabet characters from a to g</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form>
<br>
<button onclick="passPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
function passPattern() {
var P = document.getElementById("PASS").pattern;
document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhập mật khẩu không khớp với regex được chỉ định trong thuộc tính mẫu -
Khi nhấp vào nút NHẬN MẪU -
Trong ví dụ trên
Chúng tôi đã tạo một phần tử đầu vào với loại mật khẩu id =”Pass”, name =”PassW” và pattern ="[0-9] {3} | [a-g] {6}". Ở đây, giá trị thuộc tính mẫu là một regex chỉ định rằng bạn có thể nhập ba giá trị số hoặc 6 bảng chữ cái khác nhau, từ a đến g. Nếu đầu vào không khớp với regex này thì giá trị thuộc tính title được hiển thị trên hộp nhập. Trường mật khẩu này nằm trong một biểu mẫu có giá trị thuộc tính hành động được đặt thành “/Sample_page.php”. Đây là nơi dữ liệu biểu mẫu của chúng tôi sẽ được gửi khi nhấp vào nút gửi -
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form> Sau đó, chúng tôi đã tạo nút GET PATTERN sẽ thực thi phương thức passPattern () khi người dùng nhấp vào -
<button onclick="passPattern()">GET PATTERN</button>
PassPattern () sử dụng phương thức getElementById () để lấy trường nhập với mật khẩu kiểu và lấy thuộc tính mẫu của nó, thuộc tính mẫu trả về kiểu regex .. Chuỗi regex được gán cho biến P và được hiển thị trong đoạn có id “Sample” bằng cách sử dụng thuộc tính innerHTML của nó.
function passPattern() {
var P = document.getElementById("PASS").pattern;
document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}