Validate form bằng Javascript

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.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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é.

Bài viết này được đăng tại [free tuts .net]

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

<!DOCTYPE html>
<html>
    <head>
        <title>Freetuts.net - 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.

Danh sách file tải về

Tên file tải về	Pass giải nén
Tải bài học định dạng PDF	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP