Validate form bằng Javascript - Học lập trình PHP căn bản
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ư 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>Zaidap.com.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.
