Bắt lỗi form đăng ký bằng Javascript
Bắt lỗi Form (Validate Form) thường được sử dụng khi xây dựng ứng dụng web. Đối với một số website như Forum, diễn đàn, thương mại điện tử đều phải có chức năng này. Khi đưa ra một số điều kiện bằng ngôn ngữ JavaScript sẽ hạn chế người dùng nhập các thông tin không chính xác.
Một Form đăng ký sử dụng HTML cơ bản thường là điền tên đăng nhập và mật khẩu. Đối với một lập trình viên thiết kế website thì phải am hiểu về điều này. Bài viết sau đây sẽ hướng dẫn kiểm tra form hợp lệ trong JavaScript chi tiết.
Mục lục
Bắt lỗi/ Validate Form đăng ký bằng JavaScript
Tạo ra một tạo form đăng ký bằng HTML và Javascript tên là dangky.html
<html>
<head>
<title>Ví dụ Form đăng ký JavaScript</title>
</head>
<body>
<form name="form1" method="post" action=""
onsubmit="return validateform()">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="register">
</form>
<script>
function validateform() {
var name = document.form1.name.value;
var password = document.form1.password.value;
if (name == null || name == "") {
alert("Tên đăng nhập không được để trống!");
return false;
} else if (password.length < 6) {
alert("Mật khẩu ít nhất 6 ký tự");
return false;
}
}
</script>
</body>
</html>Khi nhấp vào Submit sẽ xuất hiện ra một cảnh báo
Giải thích:
Trong Function chúng ta sẽ đặt các điều kiện như:
if (name == null || name == “”) {
alert(“Tên đăng nhập không được để trống!”);
return false;
Nếu tên “trống” thì sẽ xuất hiện ô cảnh báo và quay trở lại.
else if (password.length < 6) {
alert(“Mật khẩu ít nhất 6 ký tự”);
return false;
}
Nếu mật khẩu nhỏ hơn 6 ký tự thì xuất hiện ô cảnh báo và quay lại.
Validate Form chỉ nhập số trong JavaScript
Sử dụng hàm isNaN điều kiện chỉ nhập số vào ô:
<script>
function validate() {
var num = document.form2.nhapso.value;
if (isNaN(num)) {
document.getElementById("so").innerHTML = "Chỉ được nhập số.";
return false;
} else {
return true;
}
}
</script>
<form name="form2" onsubmit="return validate()">
Nhập số: <input type="text" name="nhapso"><span id="so"></span><br>
<input type="submit" value="submit">
</form>Trên đây chúng tôi vừa giới thiệu đến bạn 2 cách Validate Form trong JavaScript thường sử dụng. Ứng dụng của nó sử dụng để kiểm tra tên đăng nhập, số điện thoại, mật khẩu, email vv…
