Hướng dẫn username validation in javascript

1- Form Validation

Khá thường xuyên bạn gặp một website mà ở đó người dùng nhập các thông tin vào một biểu mẫu (form) trước khi gửi tới máy chủ. Chẳng hạn biểu mẫu đăng ký tài khoản. Các thông tin mà người dùng nhập vào biểu mẫu cần phải được xác thực (validate) để đảm bảo sự hợp lý của dữ liệu.

Một vài ví dụ về xác thực:

• Kiểm tra đảm bảo dữ liệu không rỗng.
• Kiểm tra định dạng email
• Kiểm tra định dạng số điện thoại
• ..

Về cơ bản có 3 cách để xác thực dữ liệu:

1. Dữ liệu của form sẽ được gửi tới server (máy chủ), và việc xác thực (validate) sẽ được thực hiện tại phía máy chủ.
2. Dữ liệu của form sẽ được xác thực tại phía client bằng cách sử dụng Javascript, điều này giúp server không phải làm việc quá nhiều, và tăng hiệu năng cho ứng dụng.
3. Sử dụng cả 2 phương thức trên để xác thực form.

Trong bài học này tôi sẽ thảo luận về việc sử dụng Javascript để xác thực (validate) form. Dưới đây là hình minh hoạ mô tả hành vi của chương trình khi người dùng nhấn vào nút Submit.

1. Bạn phải đăng ký một hàm liên hợp với sự kiện onsubmit của form. Nhiệm vụ của hàm này là kiểm tra dữ liệu mà người dùng đã nhập vào form, và trả về true nếu tất cả các thông tin người dùng nhập vào hợp lệ, ngược lại trả về false.
2. Khi người dùng nhấn vào nút Submit, hàm liên hợp với sự kiện onsubmit sẽ được gọi.
3. Nếu hàm liên hợp với sự kiện onsubmit trả về true dữ liệu của form sẽ được gửi tới server. Ngược lại hành động Submit sẽ bị hủy bỏ.

2- Ví dụ đơn giản

OK, đây là một ví dụ đơn giản giúp bạn hiểu về nguyên tắc hoạt động của Form trước khi thực hành các ví dụ phức tạp hơn.

Thuộc tính (attribute) action của

   
      
      
   
   

      
Enter your Username and Password

      

         
            Username: 
            


            Password: 
            


            Submit
         
      

   


 

process-action.html

   
      

   
   

      
Process Action Page

      OK, I got data!
      
      



      [Go Back]

   

 

3- Truy cập vào các dữ liệu của form

Truy cập vào dữ liệu của một trường (field) thông qua ID của trường.

// Access field via ID:
var field =  document.getElementById("fieldId");

var value = field.value;

Truy cập vào các trường của Form thông qua thuộc tính name:

    
    
    Submit

// Get form via form name:
var myForm = document.forms["myForm"];

var u = myForm["username"].value;
var p = myForm["password"].value;

Khi người dùng nhập dữ liệu không chính xác trên một trường của form, bạn nên thông báo cho người dùng đồng thời focus vào trường đó.

validation-example1.html

   
      
      
   
   

      
Enter your Username and Password

      


         

            Username: 
            


            Password: 
            


            Submit
         

      

   


 

Ví dụ: Yêu cầu người dùng nhập vào một số từ 0 đến 10.

validation-number-example.html

   
      
      
   
   

      
Enter a Number between 0 and 10

      


         

            Number: 
            


            Submit
         

      

   


 

4- Submit thông qua Javascript

Nhấn vào nút hoặc bên trong form giúp bạn gửi dữ liệu của form này tới máy chủ, tuy nhiên bạn cũng có thể làm điều đó thông qua Javascript.

javascript-submit-example.html

   
      
      
   
   

      
Submit a from with Javascript

      


         

            Your Name: 
            


            

Submit