Validate Form Bằng JavaScript - VietTuts

Trang chủ » Javascript Kiểm Tra Mật Khẩu » Validate Form Bằng JavaScript - VietTuts

Có thể bạn quan tâm

Học JavaScript

JavaScript là gì? Cú pháp trong JavaScript Nhúng JavaScript vào HTML Biến trong JavaScript Biến toàn cầu JavaScript Kiểu dữ liệu trong JavaScript Toán tử trong JavaScript Hàm trong JavaScript Sự kiện trong JavaScript

Các Mệnh Đề Điều Khiển

Mệnh đề if-else Mệnh đề Switch-case Vòng lặp for Vòng lặp while Vòng lặp do-while

Các đối tượng JavaScript

Đối tượng trong JavaScript Mảng (Array) Chuỗi (String) Đối tượng Date Đối tượng Math Đối tượng Number Đối tượng Boolean

JavaScript BOM

Đối tượng Browser 1. Đối tượng Window 2. Đối tượng History 3. Đối tượng Navigator 4. Đối tượng Screen Cookie trong JavaScript

JavaScript DOM

5. Đối tượng Document getElementById() getElementsByName() getElementsByTagName() Thuộc tính innerHTML Thuộc tính innerText

JavaScript Validation

Validate Form bằng JavaScript Validate Email bằng JavaScript

Phỏng Vấn JavaScript

Câu hỏi phỏng vấn JavaScript Thuộc tính innerText Validate Email bằng JavaScript

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

Nội dung chính

  • Ví dụ validate Form bằng JavaScript
  • Nhập lại xác nhận mật khẩu bằng JavaScript
  • Validate số bằng JavaScript
  • Hiện thị ảnh khi validate form bằng JavaScript

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>

Kết quả:

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ả:

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>

Kết quả:

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>

Kết quả:

Thuộc tính innerText Validate Email bằng JavaScript

Recent Updates

Sử dụng Javascript trong HTMLJavaScript là gì?Biến toàn cầu JavaScriptBiến trong JavaScriptBoolean trong JavaScriptChuỗi (String) trong JavaScriptCookie trong JavaScriptCú pháp trong JavaScriptDocument.getElementById() trong JavaScriptDocument.getElementsByName() trong JavaScriptDocument.getElementsByTagName() trong JavaScriptĐối tượng Browser trong JavaScriptSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring Học Excel | Excel VBA Học Servlet | JSP | Struts2 Học C | C++ | C# Học Python Học SQL

Bài Tập Có Lời Giải

Bài tập Java Bài tập C Bài tập C++ Bài tập C# Bài tập Python Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java 25 câu hỏi phỏng vấn servlet 75 câu hỏi phỏng vấn jsp 52 câu hỏi phỏng vấn Hibernate 70 câu hỏi phỏng vấn Spring 57 câu hỏi phỏng vấn SQL

Từ khóa » Javascript Kiểm Tra Mật Khẩu