Làm cách nào để xác thực tên trong JavaScript?

Xác thực biểu mẫu thường được sử dụng để xảy ra tại máy chủ, sau khi khách hàng đã nhập tất cả dữ liệu cần thiết và sau đó nhấn nút Gửi. Nếu dữ liệu do khách hàng nhập không chính xác hoặc đơn giản là bị thiếu, máy chủ sẽ phải gửi lại tất cả dữ liệu cho khách hàng và yêu cầu gửi lại biểu mẫu với thông tin chính xác. Đây thực sự là một quá trình dài, từng gây ra rất nhiều gánh nặng cho máy chủ

JavaScript cung cấp một cách để xác thực dữ liệu của biểu mẫu trên máy tính của khách hàng trước khi gửi nó đến máy chủ web. Xác thực biểu mẫu thường thực hiện hai chức năng

• Xác thực cơ bản - Trước hết, biểu mẫu phải được kiểm tra để đảm bảo rằng tất cả các trường bắt buộc đều được điền vào. Nó sẽ chỉ yêu cầu một vòng lặp qua từng trường trong biểu mẫu và kiểm tra dữ liệu

• Xác thực định dạng dữ liệu - Thứ hai, dữ liệu được nhập phải được kiểm tra về hình thức và giá trị chính xác. Mã của bạn phải bao gồm logic phù hợp để kiểm tra tính chính xác của dữ liệu

Ví dụ

Chúng tôi sẽ lấy một ví dụ để hiểu quá trình xác nhận. Đây là một hình thức đơn giản ở định dạng html

   
   
      Form Validation      
            
   
   
   
      
         
            
            
               Name
               
            
            
            
               EMail
               
            
            
            
               Zip Code
               
            
            
            
               Country
               
                  
                     
                     
                     
                     
                  
               
            
            
            
               
               
            
            
         
            
   

đầu ra

Xác thực biểu mẫu cơ bản

Trước tiên, chúng ta hãy xem cách thực hiện xác thực biểu mẫu cơ bản. Ở biểu mẫu trên, chúng tôi đang gọi validate[] để xác thực dữ liệu khi sự kiện onsubmit đang diễn ra. Đoạn mã sau đây cho thấy việc triển khai hàm validate[] này

Xác thực định dạng dữ liệu

Bây giờ chúng ta sẽ xem cách chúng ta có thể xác thực dữ liệu biểu mẫu đã nhập trước khi gửi nó đến máy chủ web

Ví dụ sau đây cho thấy cách xác thực địa chỉ email đã nhập. Một địa chỉ email phải có ít nhất một dấu ‘@’ và một dấu chấm [. ]. Ngoài ra, '@' không được là ký tự đầu tiên của địa chỉ email và dấu chấm cuối cùng ít nhất phải là một ký tự sau dấu '@'

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

Ở đâ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 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. Lưu ý phần [-\s\.] này khớp với dấu cách ____7 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 để tạo xác thực tên trong JavaScript?