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

Thuộc tính pattern của đối tượng Input URL trong HTML DOM đặt hoặc trả về biểu thức chính quy (regex) để validate giá trị URL người dùng nhập. Giá trị nhập phải khớp pattern thì form mới submit được (HTML5 validation).

Cú pháp

Lấy regex pattern

inputURLObject.pattern

Thiết lập pattern

inputURLObject.pattern = 'RegExp'

Ví dụ minh họa

Form submit với pattern yêu cầu URL phải có http/https, www, chữ/số, .com:

<!DOCTYPE html>
<html>
<head>
<title>Input URL pattern</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="submit"] { border-radius: 10px; }
</style>
</head>
<body>
<form onsubmit="kiemTraPattern()">
  <fieldset>
    <legend>URL-pattern</legend>
    <label for="URLSelect">URL: <input type="url" id="URLSelect" pattern="https?://www\.[a-zA-Z0-9]+\.com"> </label> 
    <input type="submit" value="Gửi"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputURL = document.getElementById("URLSelect"); 
  divDisplay.textContent = 'Pattern: ' + inputURL.pattern; 
  function kiemTraPattern() { 
    if(inputURL.value !== ''){ 
      alert("Chuyển hướng đến " + inputURL.value); 
    } 
  } 
</script> 
</body> 
</html>

Kết quả

• Ban đầu: hiển thị pattern regex.
• Nhập sai pattern (ví dụ: ftp://example.org): trình duyệt chặn submit, báo lỗi pattern mismatch.
• Nhập đúng (https://www.google.com): submit thành công, alert "Chuyển hướng đến...".

Lưu ý: Pattern dùng regex JavaScript (không cần //). Kết hợp với title attribute để tùy chỉnh thông báo lỗi: title="URL phải dạng https://www.tenmien.com".