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

Thuộc tính pattern của Input Search trong HTML DOM dùng để thiết lập hoặc trả về thuộc tính pattern của trường tìm kiếm. Nó kiểm tra giá trị trường tìm kiếm dựa trên 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:

searchObject.pattern = regexp

Trong đó, regexp là biểu thức chính quy để kiểm tra trường tìm kiếm.

Ví dụ

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

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính pattern của Input Search</h1> 
<p>Giá trị trong trường tìm kiếm có thể là 3 ký tự số hoặc 6 ký tự chữ từ a đến g</p> 
<form action="/Sample_page.php"> 
    TRÁI CÂY: <input type="search" id="SEARCH1" name="fruits" 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("SEARCH1").pattern; 
        document.getElementById("Sample").innerHTML = "Giá trị thuộc tính pattern là " + P; 
    } 
</script> </body> </html>

Kết quả

Khi nhập văn bản không khớp với regex trong pattern, trình duyệt hiển thị cảnh báo.

Khi nhấn nút "LẤY PATTERN", giá trị pattern được hiển thị: [0-9]{3}|[a-g]{6}.

Giải thích ví dụ

Tạo input search với pattern [0-9]{3}|[a-g]{6} cho phép: 3 chữ số HOẶC 6 chữ cái từ a-g. Thuộc tính title cung cấp thông báo lỗi tùy chỉnh.

Hàm passPattern() lấy giá trị pattern và hiển thị:

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