Validate Form bằng JavaScript
Chắc có lẽ không ít lần bạn gặp một website mà ở đó người dùng nhập các thông tin vào một biểu mẫu (form) trước khi gửi tới máy chủ. Chẳng hạn như việc các bạn đăng ký/đăng nhập tài khoản trên eLib.VN. Các thông tin mà người dùng nhập vào biểu mẫu cần phải được xác thực (validate) để đảm bảo sự hợp lý của dữ liệu. Để tìm hiểu về Validate Form bằng JavaScript, mời bạn đọc tham khảo bài viết dưới đây của eLib nhé!
Mục lục nội dung
Điều quan trọng là cần phải validate form do người dùng gửi vì nó có thể có giá trị không phù hợp.
Validate HTML form có thể được thực hiện bởi JavaScript.
JavaScript cung cấp cho bạn cơ sở validate form hợp lệ ở phía máy khách để xử lý sẽ nhanh hơn xác nhận phía máy chủ. Vì vậy, hầu hết các nhà phát triển web thích validate form bằng JavaScript.
Thông qua JavaScript, chúng tôi có thể xác nhận tên, mật khẩu, email, ngày tháng, số điện thoại di động, vv.
1. Ví dụ validate Form bằng JavaScript
Trong ví dụ này, chúng ta sẽ xác nhận name và password. Name không được để trống và password không thể dài dưới 6 ký tự.
Người dùng sẽ không được chuyển đến trang tiếp theo cho đến khi các hạng mục nhập được nhập giá trị hợp lệ.
<script>
function validateform() {
var name = document.myform.name.value;
var password = document.myform.password.value;
if (name == null || name == "") {
alert("Name can't be blank");
return false;
} else if (password.length < 6) {
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="welcome1.php"
onsubmit="return validateform()">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="register">
</form>
</body>
2. Nhập lại xác nhận mật khẩu bằng JavaScript
<script type="text/javascript">
function matchpass() {
var firstpassword = document.form1.password.value;
var secondpassword = document.form1.password2.value;
if (firstpassword == secondpassword) {
return true;
} else {
alert("password must be same!");
return false;
}
}
</script>
<body>
<form name="form1" action="welcome1.php" onsubmit="return matchpass()">
<table>
<tr>
<td> Password: </td>
<td> <input type="password" name="password" /></td>
</tr>
<tr>
<td>Re-enter Password: </td>
<td><input type="password" name="password2" /></td>
<tr>
<tr>
<td> <input type="submit" value="Submit"> </td>
<td></td>
</form>
</body>
Kết quả:
3. Validate số bằng JavaScript
Chúng ta hãy xác thực trường text chỉ cho phép giá trị số. Ở đây, chúng ta đang sử dụng hàm isNaN().
<script>
function validate() {
var num = document.myform.num.value;
if (isNaN(num)) {
document.getElementById("numloc").innerHTML = "Chỉ nhập giá trị số.";
return false;
} else {
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()">
Number: <input type="text" name="num"><span id="numloc"></span><br>
<input type="submit" value="submit">
</form>
4. Hiện thị ảnh khi validate form bằng JavaScript
Hãy xem ví dụ validate form bằng JavaScript để hiển thị hình ảnh báo lỗi nếu các hạng mục nhập là không chính xác.
<script>
function validate() {
var name = document.myform.name.value;
var password = document.myform.password.value;
var status = false;
if (name.length < 1) {
document.getElementById("nameloc").innerHTML =
" <img src='unchecked.gif'/> Please enter your name";
status = false;
} else {
document.getElementById("nameloc").innerHTML =
" <img src='checked.gif'/>";
status = true;
}
if (password.length < 6) {
document.getElementById("passwordloc").innerHTML =
" <img src='unchecked.gif'/> Password must be at least 6 char long";
status = false;
} else {
document.getElementById("passwordloc").innerHTML =
" <img src='checked.gif'/>";
}
return status;
}
</script>
<form name="myform" action="#" onsubmit="return validate()">
<table>
<tr>
<td>Enter Name:</td>
<td><input type="text" name="name" /> <span id="nameloc"></span></td>
</tr>
<tr>
<td>Enter Password:</td>
<td>
<input type="password" name="password" />
<span id="passwordloc"></span>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="register" /></td>
</tr>
</table>
</form>
Trên đây là bài viết của eLib.VN về Validate Form bằng 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. Bạn đọc cần lưu ý. Chúc các bạn thành công!
Tham khảo thêm
- doc Validate Email bằng JavaScript
