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 submit sẽ 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 ( )
{
//kiem tra user name
If ( document.flogin.USERNAME.value= =””)
{
Alert( “invalidEmail, Vui long nhap Email”);
document.flogin.USERNAME.focus( );
return false;
}
//kiem tra password
If ( document.flogin.PASSWORD.value= =””)
{
Alert( “ Vui long nhap password”);
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.
Ví dụ
Function checkInput ( )
{
//kiem tra user name
If ( document.flogin.USERNAME.value= =””)
{
Alert( “invalidEmail, Vui long nhap Email”);
document.flogin.USERNAME.focus( );
return false;
}
//kiem tra password
If ( document.flogin.PASSWORD.value= =””)
{
Alert( “ Vui long nhap password”);
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.
Nguồn http://aweb.vn/xem-thiet-ke-web/44.Form-dang-nhap-va-kiem-tra-gia-tri-nhap-vao--bang-javascript.html
