Bắt Lỗi Form đăng Ký Sử Dụng HTML Và JavaScript | Phamhaithanh94

Trước tiên chúng ta tạo 1 form đăng ký đơn giản bao gồm các trường như trên. Với form ví dụ như ở trên chúng ta sẽ bắt lỗi yêu cầu người dùng phải nhập thông tin một cách đầy đủ như:

• Họ tên không được bỏ trống.
• Giới tính thì chỉ được chọn 1 trong 2. Và không được bỏ trống.
• Ngày sinh nhập đúng định dạng dd/mm/yyyy. Và không được bỏ trống.
• PassWord không được bỏ trống và phải pass word phải có độ dài từ 6- 20 ký tự.
• Re-Pass phải giống với PassWord đã nhập.
• Email phải đúng định dạng.

Sau  đây là đoạn code mẫu:

<form id=”main”> <h2 id=”center”>Đăng ký thành viên</h2> &nbsp;&nbsp;&nbsp; <table align=”center”> <tr> <td>Họ và tên</td> <td>:</td> <td><input placeholder=”Nhập họ tên” type=”text” id=”name”/></td> </tr> <tr> <td>Giới tính</td> <td>:</td> <td><input type=”radio” id=”Nam” value=”Nam”/>Nam &nbsp;<input type=”radio” id=”Nu” value=”Nu” /> Nữ</td> </tr> <tr> <td>Ngày sinh</td> <td>:</td> <td><input placeholder=”mm/DD/yyyy” type=”text” id=”namsinh”/></td> </tr> <tr> <td>User name</td> <td>:</td> <td><input placeholder=”Nhập tên tài khoản” type=”text” id=”username”/></td> </tr> <tr> <td>Password</td> <td>:</td> <td><input type=”password” placeholder=”Password”id=”pass”/></td> </tr> <tr> <td>Re-Pass</td> <td>:</td> <td><input type=”password” placeholder=”Re-Password” id=”re-pass”/></td> </tr> <tr> <td>Email</td> <td>:</td> <td><input type=”text” placeholder=”Nhập Email” id=”email”/></td> </tr> <br/> </table> </form> <div id=”content”> <input id=”btnClick” type=”button”name=”button” value=’Đăng ký’ onclick=”btnClick();”/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input id=”btnHuy” type=”button”name=”Huy” value=’Thoát’ onclick=”btnHuy();”/> <p id=”loi”></p> </div>

Trong thẻ input có các thuộc tính như: id tức là chỉ số dùng để xác định một đối tượng là duy nhất type: kiểu dữ liệu truyền vào. Trong from có 3 kiểu type là text, radio, button. placeholder dùng để chú thích cho người dùng biết họ phải làm gì đối với mỗi ô nhập.

Để bắt được lỗi chúng ta cần phải bắt cần phải tạo sự kiện cho 2 nút là đăng ký và thoát. Chúng ta sẽ khai báo bằng các sự kiện trên trong thẻ javascript. Cú pháp sẽ là: <script type=”text/javascript”>

funciton btnClick(){}// btnClick() tương ứng với tên sự kiện onclick trong thẻ input

funciton btnThoat(){} </script> Tiếp theo chúng ta sẽ bắt sự kiện cho nút này. Trước tiên là lỗi bỏ trống không nhập họ tên.

var i=””;// dùng để lưu những thông tin lỗi mà người dùng mắc phải var hoten = document.getElementById(‘name’);// khai báo biến họ tên lấy theo địa chỉ id là name. if(hoten.value == “”)// kiểm tra hoten có bỏ trống không { i += “Bạn chưa nhập họ tên.<br/>”; }

Tương tự đối với giới tính: var gtnam = document.getElementById(‘Nam’); var gtnu = document.getElementById(‘Nu’); if((gtnam.checked==false && gtnu.checked==false)||(gtnam.checked==true && gtnu.checked==true)) { // kiểm tra người dùng có bỏ trống không hay là chọn cả 2 i += “Bạn chọn lại giới tính.<br/>”; }

Đối với ngày sinh chúng ta chỉ kiểm tra xem người dùng có bỏ trống không và lưu vào biến i; var namsinh = document.getElementById(‘namsinh’); if(namsinh.value==””){ i +=”Năm sinh không được bỏ trống.<br/>”; }

Username cũng như trường Họ tên cũng bắt lỗi bỏ trống var user = document.getElementById(‘username’); if(user.value==””) i+= “Username không được bỏ trống.<br/>”;

Đối với password thì chúng ta cần bắt lỗi không được bỏ trống và độ dài phải từ 6-20 ký tự var pass = document.getElementById(‘pass’); if(pass.value !=””){ if(pass.value.length<6 || pass.value.length >20) i+= “Password phải có độ dài từ 6-20 ký tự.<br/>”; } else i+=”Password không được bỏ trống.<br/>”;

Sau khi nhập password thành công chúng ta cần kiểm tra xem người dùng nhập lại password có đúng không: var re_pass = document.getElementById(‘re-pass’); if(pass.value != re_pass.value) i+= “Password không khớp.<br/>”;

Đối với kiểm tra email chúng ta cần khai báo 1 biến reg_email  chứa khuôn chuẩn của email var reg_email =/^[A-Za-z0-9]+([_\.\-]?[A-Za-z0-9])*@[A-Za-z0-9]+([\.\-]?[A-Za-z0-9]+)*(\.[A-Za-z]+)+$/;

Sau đó kiểm tra email nhập vào bỏ trống hay không nếu không thì kiểm tra xem có đúng với  khuôn dạng reg_email không nếu không đúng khuôn dạng sẽ đưa ra thông báo lỗi. var email = document.getElementById(’email’); if(email.value!=””){ if(reg_email.test(email.value)==false) i+=”Email không hợp lệ.<br/>”; } else i+=”Không được bỏ trống email.<br/>”;

Sau khi bắt lỗi thành công thì chúng ta sẽ kiểm tra biến i xem có khác rống hay không nếu không thì đưa ra thông báo ở thẻ p có id=”lỗi” là “Đăng ký thành công”. Nếu có thì sẽ hiển thị các lỗi mà người dùng mắc phải if(i!=””) document.getElementById(‘loi’).innerHTML=i+”\n”; else document.getElementById(‘loi’).innerHTML=”Đăng ký thành công”; }

Tất cả các việc kiểm tra trên chúng ta sẽ đưa vào trong sự kiện của nút đăng ký. Khi người dùng bấm nút đăng ký sẽ thông báo thành công hay thông báo lỗi mà người dùng mắc phải

Share this:

• X
• Facebook

Like Loading...

Related