Thuộc tính mẫu HTML xác định một biểu thức chính quy mà giá trị của phần tử HTML được đối sánh trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
<input pattern=”regular expression”>
Hãy để chúng tôi xem một ví dụ về Thuộc tính mẫu HTML -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
input[type='password'] {
width: 300px;
padding: 8px 16px;
border: 2px solid #fff;
background: transparent;
border-radius: 20px;
display: block;
margin: 1rem auto;
outline: none;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
::placeholder {
color: #000;
}
</style>
<body>
<h1>HTML pattern attribute Example</h1>
<form action="">
<input type="password" placeholder="Enter your account password" required pattern=".{8,}">
<input type="submit" value="Submit" class="btn" onclick='check()'>
</form>
<div class="show"></div>
<script>
function check() {
if (document.querySelector("input[type='password']").value.length < 8) {
document.querySelector(".show").innerHTML = 'Please enter a password of more than or equal to 8 characters.'
};
}
</script>
</body>
</html> Đầu ra
Nhập mật khẩu ít hơn 8 ký tự, sau đó nhấp vào “ Gửi ”Để hiển thị thông báo cảnh báo.
