Bắt lỗi Form còn có tên gọi khác là Validate form thường được sử dụng trong những trường hợp xây dựng ứng dụng web. Đặc biệt đối với những website là forum, diễn đàn hoặc trang thương mại điện từ thì chức năng này được sử dụng khá phổ biến. Việc đưa ra một số điều kiện thông qua ngôn ngữ JavaScript sẽ hạn chế người dùng sử dụng những thông tin đăng nhập không chính xác. Vậy bắt lỗi form đăng ký bằng javascript có cơ chế hoạt động như thế nào. Cùng tìm hiểu ngay trong bài viết dưới đây bạn nhé!
Bắt lỗi form đăng ký bằng javascript
Thông thường một form đăng ký sử dụng HTML sẽ bao gồm hai thông tin là đăng nhập và mật khẩu. Nếu muốn trở thành một trình lập viên thiết kế web chuyên nghiệp bạn cần nắm vững điều này. Cụ thể quá trình bắt lỗi form đăng ký bằng javascript sẽ bao gồm hai bước cơ bản sau:
– Đối với Validate Form đăng ký bằng JavaScript
Form đăng ký thường được tạo bằng HTLM có tên miền là dangky.htlm. Để kiểm tra tính hữu dụng của dạng form này bạn có thể tham khảo đoạn mã được sử dụng phổ biến như sau:
<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>
Lúc này sau khi kết thúc quá trình nhập mã bạn nhấn vào Submit và một cảnh báo sẽ hiện ra với thông điệp: Trang này cho biết tên đăng nhập không được để trống. Có thể giải thích cụ thể đoạn mã này như sau:
Trong Function đã được đặt sẵn các điều kiện là if (name == null || name == “”) {
alert(“Tên đăng nhập không được để trống!”);
return false;
Trong trường hợp tên “trống” thì sẽ xuất hiện ô cảnh báo và quay trở lại. Người dùng bắt buộc phải điền đúng thông tin đăng nhập mới có thể tiến hành các bước tiếp theo.
Về phần mật khẩu, trong đoạn mã trên có sử dụng hàm if (name == null || name == “”) {
alert(“Tên đăng nhập không được để trống!”);
return false;
Do đó nếu mật khẩu nhỏ hơn 6 ký tự thì ô cảnh báo sẽ xuất hiện và người đăng nhập phải quay lại điền đầy đủ thông tin cần thiết.
– Đối với Validate Form chỉ nhập số trong JavaScript
Bạn có thể sử dụng hàm isNaN, lúc này người dùng chỉ có thể nhập số vào ô được yêu cầu. Theo đó đoạn mã cần sử dụng như sau:
<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>
Tìm hiểu chung về JavaScript
JavaScript là một loại ngôn ngữ lập trình phổ biến nhất trên thế giới. Đặc biệt JavaScript còn nằm trong top 3 ngôn ngữ của lập trình web: HTLM, CSS. Ưu điểm nổi bật của ngôn ngữ này là bạn có thể học hỏi và áp dụng nhanh chóng cho nhiều mục đích khác nhau. Ví dụ: chạy game, tạo phần mềm nền web,…Một số lợi ích mà JavaScript đem đến cho người dùng như:
– Có thể gắn trên một số element của các trang web hoặc event chỉ cần thông qua một cú click chuột.
– Hoạt động ổn định trên nhiều nền tảng trình duyệt khác nhau. Đem đến những trải nghiệm tuyệt vời dành cho người dùng.
– Được đánh giá là dễ học hơn những ngôn ngữ lập trình khác.
– Dễ dàng phát hiện lỗi hơn trong quá trình sử dụng vì vậy có thể khắc phục nhanh chóng.
Bên cạnh những ưu điểm tuyệt vời kể trên javascript vẫn tồn tại một số khuyết điểm nhỏ như:
– Dễ bị khai thác.
– Có thể bị lợi dụng để thực thi mã độ trên máy tính của người dùng khác.
– Không hỗ trợ một số trình duyệt đặc thù.
Trên đây là tổng hợp hai cách bắt lỗi form đăng ký bằng javascript phổ biến nhất hiện nay. Bạn có thể ứng dụng để kiểm tra tên đăng nhập, mật khẩu hoặc email,….bất kỳ thông tin nào mà bạn muốn kiểm tra. Đảm bảo quá trình đăng nhập của người dùng diễn ra chính xác và bảo mật.
Trả lời