Học cách Validate form đơn giản với Javascript

Học cách Validate form đơn giản với Javascript là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Học cách Validate form đơn giản với Javascript sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và PHP nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Như vậy là mình đã giới thiệu xong phương thức POST và phương thức GET rồi nhỉ =)) Vậy trong bài này mình sẽ hướng dẫn một phần rất thú vị đó là validate form bằng Javascript.

Khi bạn muốn lấy thông tin từ user thì bắt buộc bạn phải sử dụng form. Trường hợp user không có ý đồ xấu thì không sao nhưng nếu gặp những user có ý đồ xấu muốn phá hoại hoặc gây cản trở công việc của người quản trị thì họ sẽ nhập những thông tin ảo hoặc những thông tin chứa mã độc thì rất là tai hại. Một câu hỏi đặt ra là có cách nào chống lại vấn đề này không? Có đấy, chứ nếu không có thì các websites đã xụp lâu rồi :D

Trước khi insert thông tin vào trong database thì ta phải qua một bước và bước này ta gọi là validate. nhiệm vụ của bước này là kiểm tra dữ liệu có hợp lệ hay không? Nếu hợp lệ thì thêm vào database và ngược lại sẽ thông báo cho user là dữ liệu không hợp lệ. Chúng ta có hai bước validate, bước thứ nhất là sử dụng javascript và bước thứ 2 là sử dụng mã code PHP. Trong bài này mình sẽ trình bày bước thứ nhất.

1. Hiểu về lệnh return trong xử lý sự kiện Javascript

Để xây dựng được chức năng này thì đòi hỏi bạn phải có kiến thức Javascript căn bản, vì vậy nếu bạn chưa biết về Javascript thì hãy học nó đi nhé.

Giả sử mình có form như sau: XEM DEMO

 

<!DOCTYPE html>
<html>
    <head>
        <title>hoidapcode.com - Validate form = Javascript</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="javascript">
            function validateForm()
            {
                return false;
            }
        </script>
    </head>
    <body>
        <form method="post" action="" onsubmit="return validateForm()">
            Username: <input type="text" name="username" id="username" value=""/> <br/><br/>
            Password: <input type="password" name="password" id="password" value=""/> <br/><br/>
            <input type="submit" name="login" value="Login"/>
        </form>
    </body>
</html>

 

Có hai lưu ý:

  • Mình bổ sung một hàm vào sự kiện onsubmit của form onsubmit="return validateForm()".
  • Trong hàm Javascript mình có return về false.
  function validateForm()  {      return false;  } 

Bây giờ bạn chạy lên và click vào nút login xem form có reload không nhé. Không reload phải không nào :D Có một lý do dẫn đến tình trạng này đó là mình đã gán return validateForm() cho sự kiện onsubmit của form, nghĩa là để quyết định sự kiện submit có được kích hoạt hay không là phụ thuộc vào kết quả của hàm validateForm(), mà hàm validateForm() mình lại return về false tức là không cho phép submit nên không thể submit form đó được. Bây giờ bạn thử đổi lại return true thì sẽ submit được.

Vậy để quyết định một sự kiện nào đó được kích hoạt hay không thì ta chỉ cần return true hoặc false. 

2. Sử dụng Javascript để validate form

Quay lại bài toán trên mình sẽ viết lại cho hàm validateForm() như sau:

XEM DEMO

 

function validateForm()
{
    // Bước 1: Lấy giá trị của username và password
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
 
    // Bước 2: Kiểm tra dữ liệu hợp lệ hay không
    if (username == ''){
        alert('Bạn chưa nhập tên đăng nhập');
    }
    else if (password == '')
    {
        alert('Bạn chưa nhập mật khẩu');
    }
    else{
        alert('Dữ liệu hợp lệ, ta có thể chấp nhận submit form');
        return true;
    }
 
    return false;
}

 

Bây giờ bạn thử click vào nút đăng nhập lại xem kết quả như thế nào nhé :)

Nếu bạn muốn tìm hiểu thêm các hàm validate data trong Javasccript thì có thể đọc bài "một số hàm validate trong javascript".

3. Thông thường cần validate những gì?

Mỗi ứng dụng có những loại dữ liệu khác nhau nên việc liệt kê ra hết là điều không thể, chính vì vậy trong bài này mình chỉ đưa ra một số loại dữ liệu mà ta thường validate nhé.

  • Kiểm tra dữ liệu không được rỗng
  • Kiểm tra có phải đúng định dạng email
  • Kiểm tra có phải đúng định dạng URL
  • Kiểm tra có phải đúng định dạng hình ảnh
  • Kiểm tra có phải đúng định dạng số điện thoại
  • ... ngoài ra còn nhiều trường hợp và phụ thuôc vào dư án.

Cách thông thường nhất là chúng ta sử dụng RegEx để kiểm tra định dạng dữ liệu.

4. Lời kết

Qua bài này mình đã giải thích cho các ban hiểu lệnh return và tầm quan trọng của lệnh return trong việc validate form với Javascript. Trên thực tế thì khi bạn validate form bằng Javascript chỉ mang tính chất là giúp website thân thiện với người dùng thôi, nghĩa là họ sẽ không cảm thấy khó chịu vì khi họ click submit thì ta sẽ thông báo ngay và luôn chứ không cần phải refresh lại trang. Nếu một người cố tình tấn công phá hoại thông qua đường này thì bạn phải validate thêm ở phía server nữa vì khi người dùng tắt Javascript ở Browser thì chức năng này sẽ không hoạt động được.

Hy vọng với bài viết về Học cách Validate form đơn giản với Javascript đã giải đáp giúp bạn phần nào về kiến thức lập trình PHP. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!