Form đăng nhập và kiểm tra giá trị nhập vào bằng javascript
Nếu bạn làm một website có Database thì việc lập danh mục và thành phần của một Form đăng nhập thì quá dễ dàng phải không, còn nếu là web tỉnh không sử dụng Database thì sao?
Trong hàm, bạn sử dụng phát biểu RETURN để trả về giá trị TRUE nếu giá trị nhập là hợp lệ, ngược lại là giá trị FALSE nếu dữ liệu nhập không hợp lệ. Nếu giá trị FALSE thì thao tác SUBMITsẽ không diễn ra và bạn yêu cầu người dùng nhập lại dữ liệu. Phương thức này được gọi trong biến cố ONSUBMIT của Form.
Ví dụ
Function checkInput ( )
{
//Kiểm tra user name:
If ( document.flogin.USERNAME.value= =””)
{
Alert( “invalidEmail, Vui lòng nhập địa chỉ Email của bạn:”);
document.flogin.USERNAME.focus( );
return false;
}
//Kiểm tra password
If ( document.flogin.PASSWORD.value= =””)
{
Alert( “ Vui lòng nhập password của bạn vào:”);
document.flogin.PASSWORD.focus( );
return false;
}
Return true;
}
Bạn kiểm tra giá trị nhập vào trong thẻ text có tên là USERNAME, nếu giá trị rỗng, một thông báo xuất hiện và chuyển con nháy vào thẻ này bằng Phương thức Focus( ).
Kế tiếp, phương thức trả về giá trị FALSE. Điều này có nghĩa form sẽ không được submit cho đến khi phương thức trên về giá trị TRUE
Tương tự như vậy với thẻ password có tên PASSWORD.
Nếu cả hai trường hợp trên đều hợp lệ, có nghĩa người dùng nhập liệu vào hai thẻ kia là hợp lệ, phương thức trả về giá trị TRUE, Form được SUBMIT.
Như vậy chúng ta sẽ gọi phương thức CHECKINPUT() trên khi nào, dưới đây là minh họa cách cài đặt và gọi hàm CHECKINPUT().
<table>
<form name=”flogin” method=”post”
action=”thanhcong.php?goto=” onsubmit=”return checkinput();”>
<tr>
<td align=”left” class=”content-sm”>
Email address: </td>
</tr>
<tr>
<td align=”left” class=”input”>
<input type=”text” name=”USERNAME” size=”25″ maxlength=”100″ class=”textbox” />
</td>
</tr>
<tr>
<td align=”left” class=”content-sm”> password:
</td>
</tr>
<tr>
<td align=”left” class=”input”>
<input type=”password” name=”PASSWORD” size=”25″ maxlength=”8″ class=”textbox” />
</td>
</tr>
<tr>
<td align=”left” class=”text_normal” valign=”top”><br />
<input type=”submit” style=”width:80px” name=”Signin” value=”dang nhap” class=”button” />
<input type=”reset” name=”reset” value=”Nhap lai” class=”button” /></td>
</tr>
</form>
</table>
Khi người dùng nhấp vào nút Dang nhap của form, trong biến cố onsubmit bạn gọi phương thức checkinput bằng phát biểu
<form name=” flogin” method=”post”
Action=”thanhcong.php?goto=”onsubmit=”return checkinput();”>
Nếu phương thức checkinput() trả về giá trị true, form này sẽ được submit. Ngược lại trong trường hợp người dùng không nhập địa chỉ Email,password phương thức trên trả về giá trị false, form trên không được submit. Đồng thời hợp thoại xuất hiện thông báo nhập password hoặc Email.
