Tạo form đăng kí có kiểm tra điều kiện bằng JavaScript

Thứ Sáu, 20 tháng 4, 2012
Check Form Register
chia sẽ code hay cho các bạn cùng tham khảo





Đăng ký thành viên
Xin vui lòng nhập đúng
các thông tin cá nhân
Tên đăng nhập:
Mật khẩu:
Nhập lại Mật khẩu:
Họ tên:
Địa chỉ:
Email:
Số điện thoại:


Sau đây là Code chia sẽ cho các bạn ^^
<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="http://sechiakinhnghiem.blogspot.com" 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>
nguồn: Vn-Zoom.com











Xem thêm bài viết cùng chuyên mục:
, 





    

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

























Ý kiến bạn đọc [ 0 ]



















Ý kiến của bạn