Tên người dùng regex html

Trong hướng dẫn này, bạn sẽ thấy cách sử dụng biểu thức chính quy để xác thực. Thông qua danh sách các ví dụ, chúng tôi sẽ xây dựng tập lệnh để xác thực số điện thoại, mã bưu điện của Vương quốc Anh cùng với nhiều ví dụ khác

Trước tiên, hãy bắt đầu bằng cách xây dựng trang web và mã xác thực, sau đó chúng ta sẽ nói về các biểu thức chính quy được sử dụng để xác thực các chuỗi. Trước tiên, hãy truy cập tệp html của bạn và dán đoạn mã sau

<form action="" onsubmit="validate()">
  <input type="text"id="phone-number" placeholder="phone number"/> <br>
  <input type="text" id="postal-code" placeholder="postal code" /><br>
  <input type="submit" />
form>

Ở đây, tôi có một hình thức đơn giản. Nó có một sự kiện onsubmit được đính kèm với một chức năng có tên là xác thực () mà chúng ta sẽ tạo sau bên trong biểu mẫu này, có ba đầu vào, một đầu vào cho số điện thoại của chúng ta, một đầu vào khác dành cho mã bưu điện và đầu vào thứ ba và đầu vào cuối cùng là nút gửi.

Bây giờ, hãy chuyển sang mã javascript sẽ chứa tất cả các phần biểu thức chính quy

function validate()
{
  var phoneNumber = document.getElementById('phone-number').value;
  var phoneRGEX = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
  var phoneResult = phoneRGEX.test(phoneNumber);
  alert("phone:"+phoneResult );
}

Đây là chức năng xác nhận () của chúng tôi bây giờ. Nó chỉ chứa mã xác thực số điện thoại. Trong dòng đầu tiên, tôi đang sử dụng tài liệu. getElementById() để lấy số điện thoại từ phần tử đầu vào. Sau đó, tôi đã tạo biểu thức chính quy của mình và gắn nó vào một biến có tên là phoneRGEX lưu ý rằng tôi không cần đặt biểu thức chính quy trong dấu ngoặc kép, điều này là do javascript tự nhiên nhận ra các biểu thức chính quy nên không cần phải tạo chúng dưới dạng chuỗi rồi chuyển đổi chúng

Sau đó, tôi đã tạo một biến chứa kết quả của việc chạy hàm test() trên chuỗi phoneNumber, đây sẽ là một giá trị boolean chứa true nếu chuỗi khớp với biểu thức chính quy của chúng ta hoặc false nếu không.

Bây giờ, hãy chuyển sang phần thú vị đang thảo luận về biểu thức chính quy

/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/

Đầu tiên chúng ta có dấu gạch chéo bắt đầu và kết thúc “/”, sau đó biểu thức bắt đầu bằng dấu “^” để khớp với phần đầu của chuỗi. Chú ý phần [-\s\.] này khớp với dấu cách ____5 dấu gạch nối hoặc dấu chấm (.).[0-9]{3} có nghĩa là 3 chữ số. Vì vậy, về cơ bản, biểu thức cố khớp với một số điện thoại như thế này (541) 754-3010 hoặc như thế này 541-754-3010 hoặc có dấu cách

Bây giờ hãy chuyển sang phần Mã bưu chính

function validate(){
  var phoneNumber = document.getElementById('phone-number').value;
  var postalCode = document.getElementById('postal-code').value;
  var phoneRGEX = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
  var postalRGEX = /^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i;
  var phoneResult = phoneRGEX.test(phoneNumber);
  var postalResult = postalRGEX.test(postalCode);
  alert("phone:"+phoneResult + ", postal code: "+postalResult);
}

Ở đây tôi đã thêm một biến mới có tên là mã bưu chính để lấy mã bưu chính từ biểu mẫu, sau đó tạo một biến khác để lưu trữ biểu thức chính quy của mã bưu chính mà chúng ta sẽ thảo luận trong giây lát. Sau đó, tôi đã sử dụng chức năng kiểm tra để kiểm tra chuỗi của mình dựa trên biểu thức chính quy và in kết quả dưới dạng cảnh báo

Bây giờ hãy chuyển sang biểu thức chính quy

Ví dụ về mã bưu chính Vương quốc Anh. EC1A 1BB W1A 0AX M1 1AE B33 8TH CR2 6XH DN55 1PT Vì vậy, 1 hoặc 2 ký tự chữ cái, theo sau là 1 hoặc 2 chữ số, sau đó là khoảng trắng và một chữ số và chính xác hai ký tự chữ cái. Vì vậy, đây là mẫu biểu thức chính quy

/^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i

Chữ i ở cuối mẫu biểu thị rằng đây là kết quả khớp không phân biệt chữ hoa chữ thường

Đây là mã demo

Bây giờ chúng ta đã hiểu đúng các mẫu, chúng ta có thể tiếp tục và thêm mã này vào chức năng xác thực của biểu mẫu

Làm cách nào để xác thực tên người dùng trong HTML?

\\ s+ nghĩa là gì trong regex?

'$' nghĩa là gì trong regex?

Regex 0 * 1 * 0 * 1 * có nghĩa là gì?