Javascript - Ví dụ kiểm tra form
kiểm tra form hợp lệ
Tạo ra hàm kiểm tra hợp lệ bằng cách dùng từng phần tử input trong form để kiểm tra.
<html>
<head>
<title>Check Form Register</title>
<META name="Author" content="Scorpion">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
function checkinput(){
username=document.myform.username;
password=document.myform.password;
password1=document.myform.password1;
hoten=document.myform.hoten;
diachi=document.myform.diachi;
email=document.myform.email;
dienthoai=document.myform.dienthoai;
reg1=/^[0-9A-Za-z]+[0-9A-Za-z_]*@[\w\d.]+.\w{2,4}$/;
testmail=reg1.test(email.value);
if(username.value==""){
alert("Hãy chọn tên đăng nhập");
username.focus();
return false;
}
if(password.value==""){
alert("Chưa nhập mật khẩu");
password.focus();
return false;
}
if(password1.value==""||password1.value!==password.value){
alert("Mật khẩu lần 2 chưa khớp");
password1.focus();
return false;
}
if(hoten.value==""){
alert("Hãy nhập vào họ tên của bạn");
hoten.focus();
return false;
}
if(diachi.value==""){
alert("Chưa nhập địa chỉ");
diachi.focus();
return false;
}
if(!testmail){
alert("Địa chỉ email không hợp lệ");
email.focus();
return false;
}
if(isNaN(dienthoai.value)){
alert("Số điện thoại chưa chính xác");
dienthoai.focus();
return false;
}
else alert('OK, đã nhập đúng dữ liệu');
return true;
}
</script>
</head>
<body>
<form name="myform" method="post" action="#" onsubmit="return checkinput();">
<table align="center">
<p><strong><font color="#FF0000">Đăng ký thành viên</font></strong>
</p>
<tr>
<td>Xin vui lòng nhập đúng<br />
các thông tin cá nhân</td>
</tr>
<p></p>
<tr>
<td><b>Tên đăng nhập:</b></td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td><b>Mật khẩu:</b></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td><b>Nhập lại Mật khẩu:</b></td>
<td><input type="password" name="password1" /></td>
</tr>
<tr>
<td><b>Họ tên:</b></td>
<td><input type="text" size="30" name="hoten" /></td>
</tr>
<tr>
<td><b>Địa chỉ:</b></td>
<td><input type="text" size="30" name="diachi" /></td>
</tr>
<tr>
<td><b>Email:</b></td>
<td><input type="text" size="30" name="email" /></td>
</tr>
<tr>
<td><b>Số điện thoại:</b></td>
<td><input type="text" size="20" name="dienthoai" /></td>
</tr>
<p align="center"> </p>
</table>
<p align="center">
<input type="submit" value="Đăng ký" style="color:yellow;background:green">
<input type="reset" value="Làm lại" style="color:yellow;background:green">
</p>
</form>
</body>
</html>
