Xác thực biểu mẫu bằng javascript

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

JavaScript cung cấp một cách để đánh giá dữ liệu của Biểu mẫu trên máy tính của Máy khách trước khi gửi nó tới Máy chủ Web

Form Validation nói chung thực hiện hai chức năng

• Thẩm định cơ bản (Xác thực biểu mẫu cơ bản) − Đầu tiên, 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 phải nhập đầy đủ. Nó sẽ chỉ yêu cầu một vòng lặp qua mỗi trường trong Biểu mẫu và kiểm tra dữ liệu
• Thẩm định định dạng dữ liệu (Xác thực định dạng dữ liệu) − Thứ hai, dữ liệu đầu vào phải được kiểm tra tính chính xác của Biểu mẫu và giá trị. Mã của bạn phải có tính logic thích hợp để kiểm tra sự chính xác của dữ liệu

Ví dụ

Chúng ta sẽ quan sát ví dụ sau để hiểu tiến trình của thẩm phán. Dưới đây là một Biểu mẫu đơn giản trong định dạng HTML

   
      Form Validation

      

   

   
      
         

            
               Name
               
            

            
               EMail
               
            

            
               Zip Code
               
            

            
               Country
               
                  
                     
                     
                     
                     
                  
               
            

            
               
               
            

         
      

   

Kết quả

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

Đầu tiên chúng ta xem cách thực hiện Xác thực cơ bản. Trong Form on, chúng ta đang gọi validate() để thẩm định dữ liệu khi sự kiện onsubmit đang diễn ra. Code after only theexecuted of validate() function

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

Bây giờ chúng ta sẽ thấy cách thẩm định dữ liệu Form đã nhập trước khi gửi nó tới Web Server

Ví dụ sau cách thẩm định một địa chỉ Email đã nhập. Một địa chỉ Email phải chứa ít nhất một ký hiệu '@' và một dấu chấm (. ). Ngoài ra, '@' không phải 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 ký hiệu '@'

Khi bạn ghé thăm một trang web nào đó, bạn có thể thường xuyên bắt gặp các biểu mẫu (biểu mẫu), ví dụ như các biểu mẫu đăng ký, đăng nhập tài khoản, các biểu mẫu lấy ý kiến ​​khách hàng,. 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 số ví dụ về xác thực biểu mẫu mà chúng ta có thể thường gặp bao gồm

• Tra cứu dữ liệu chắc chắn không được để trống
• Kiểm tra định dạng email, số điện thoại
• Yêu cầu khi đặt mật khẩu (độ dài, các ký tự phải có,. )
• Zip code, quốc gia, ngày tháng,
• ...

Vì vậy, trên thực tế người ta sử dụng mẫu xác thực khi nào?

• Dữ liệu của biểu mẫu sẽ được gửi tới máy chủ và việc xác thực sẽ được thực hiện tại máy chủ
• Dữ liệu của biểu mẫu sẽ được xác thực tại máy khách trước khi gửi tới máy chủ bằng cách sử dụng Javascript, điều này giúp máy chủ không phải làm việc quá nhiều và tăng hiệu suất cho ứng dụng
• Sử dụng kết hợp cả 2 phương thức trên để xác thực

OK, bây giờ chúng ta cùng đi vào một ví dụ cụ thể

Ở trên mình có giao diện một biểu mẫu đăng ký cơ bản với các trường dữ liệu. Họ tên, Số điện thoại, Email và nút Đăng ký

Giao diện các phần này các bạn có thể tham khảo tại đây. https. //github. com/buihien0109/js-validate-basic

Đối với biểu mẫu bên trên, chúng ta có thể liệt kê ra một số trường hợp cần xác thực như

• Họ tên không được để trống
• Số điện thoại không được để trống
• Email could not be void
• Định dạng số điện thoại không đúng định dạng
• Định dạng email không đúng định dạng

Nếu có bất kỳ trường hợp nào trong các trường hợp ngẫu nhiên xảy ra, chúng tôi sẽ thông báo 1 tin nhắn văn bản ngay bên dưới ô nhập liệu để người dùng dễ nhận biết và chỉnh sửa lại nội dung cho phù hợp

Trường hợp còn lại tất cả các ô dữ liệu đều đáp ứng điều kiện xác nhận hợp lệ, lúc này chúng tôi sẽ thông báo ra thông báo với nội dung "Đăng ký thành công"

Bắt đầu thôi nào 😄 =))

const btnRegister = document.getElementById('btn-register');

btnRegister.addEventListener('click', function () {
    let isValid = checkValidate();

    if (isValid) {
        alert('Gửi đăng ký thành công');
    }
});

Đầu tiên chúng ta sẽ truy cập vào nút "Đăng ký" và tiến hành lắng nghe sự kiện khi người dùng nhấp vào nút này

Bên trong hàm xử lý sự kiện, chúng ta tiến hành gọi hàm checkValidate(), hàm này sẽ trả về giá trị true/false tùy thuộc vào dữ liệu trong các ô đầu vào có đủ điều kiện xác thực hay không?

Trường hợp isValid == true, lúc này chúng ta sẽ hiển thị thông báo "Gửi đăng ký thành công"

Bây giờ chúng ta sẽ tiến hành khai báo hàm checkValidate()

// Truy cập vào các ô input
const usernameEle = document.getElementById('username');
const emailEle = document.getElementById('email');
const phoneEle = document.getElementById('phone');

// Validate dữ liệu trong các ô input và highlight
function checkValidate() {
    let usernameValue = usernameEle.value;
    let emailValue = emailEle.value;
    let phoneValue = phoneEle.value;

    let isCheck = true;

    // Kiểm tra trường username
    if (usernameValue == '') {
        setError(usernameEle, 'Tên không được để trống');
        isCheck = false;
    } else {
        setSuccess(usernameEle);
    }

    // Kiểm tra trường email
    if (emailValue == '') {
        setError(emailEle, 'Email không được để trống');
        isCheck = false;
    } else if (!isEmail(emailValue)) {
        setError(emailEle, 'Email không đúng định dạng');
        isCheck = false;
    } else {
        setSuccess(emailEle);
    }

    // Kiểm tra trường phone
    if (phoneValue == '') {
        setError(phoneEle, 'Số điện thoại không được để trống');
        isCheck = false;
    } else if (!isPhone(phoneValue)) {
        setError(phoneEle, 'Số điện thoại không đúng định dạng');
        isCheck = false;
    } else {
        setSuccess(phoneEle);
    }

    return isCheck;
}

Trong hàm checkValidate(), trước hết chúng ta sẽ lấy dữ liệu của các ô đầu vào và lưu vào các biến usernameValue, emailValue, phoneValue

Tiếp theo chúng ta có biến isCheck, biến này được sử dụng để xác định xem dữ liệu ở tất cả các ô đầu vào hợp lệ hay không, chỉ cần 1 trường hợp không hợp lệ isCheck = false (default is true)

Trong chức năng này, chúng ta sẽ tiến hành kiểm tra dữ liệu của 3 ô đầu vào

• Kiểm tra tên người dùng trường
• Kiểm tra điện thoại trường
• Kiểm tra email trường

Ở trong mỗi trường lại có các điều kiện nhỏ hơn để chúng ta tiến hành kiểm tra. Do cơ bản quá trình kiểm tra của 3 trường này khá giống nhau nên mình sẽ giải thích về quá trình xác thực của trường Email

if (emailValue == '') {
    setError(emailEle, 'Email không được để trống');
    isCheck = false;
} else if (!isEmail(emailValue)) {
    setError(emailEle, 'Email không đúng định dạng');
    isCheck = false;
} else {
    setSuccess(emailEle);
}

Với trường email có 2 điều kiện xác thực

• Email could not be void
• Định dạng email không đúng định dạng

Với những trường hợp xảy ra lỗi, lúc này chúng ta sẽ gọi hàm setError() đồng thời truyền vào emailEle (để đánh dấu) và message (báo lỗi trên giao diện), đồng thời đánh giá isCheck = false

Trong trường hợp dữ liệu thảo luận, chúng ta sẽ gọi hàm setSuccess() và truyền vào emailEle (để đánh dấu)

function setError(ele, message) {
    let parentEle = ele.parentNode;
    parentEle.classList.add('error');
    parentEle.querySelector('small').innerText = message;
}

Hàm setError() có tác dụng đánh dấu đầu vào ô và hiển thị thông báo lỗi trong trường hợp xác thực lỗi

function setSuccess(ele) {
    ele.parentNode.classList.add('success');
}

Hàm setError() có tác dụng đánh dấu đầu vào ô trong trường hợp lệ xác thực thành công

2 class "success" và "error" mình đều định nghĩa trong file style. css

Hình ảnh minh họa cho function setError()

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

function isPhone(number) {
    return /(84|0[3|5|7|8|9])+([0-9]{8})\b/.test(number);
}

2 chức năng isEmail(), isPhone() có tác dụng kiểm tra xem đầu vào phải là email hoặc số điện thoại hay không. Ở đây mình có sử dụng Regex để kiểm tra, phần Regex này các bạn có thể search trên mạng hoặc có thể tự viết 1 đoạn Regex

Trước khi đến phần kiểm tra thành quả, mình được bổ sung thêm 1 mã đoạn khi người dùng nhấn vào nút "Đăng ký"

Mình bổ sung thêm mã đoạn trên để đảm bảo trước khi tiến hành xác nhận hợp lệ thì trong các ô đầu vào không xuất hiện lớp " thành công ", " lỗi"

😄 Dưới đây là một vài kết quả, mình đạt được sau khi thử nghiệm, các bạn có thể quan sát

1. Trường hợp các ô dữ liệu để trống

2. Trường hợp không đúng định dạng dữ liệu

3. Trường hợp hợp lệ thành công

Mã nguồn tham khảo của bài viết này các bạn có thể tra cứu tại đây. https. //github. com/buihien0109/js-validate-basic