Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách làm validation form cơ bản bằng JavaScript

Validate phía client trước khi submit: kiểm tra trường bắt buộc, định dạng email, độ dài, kiểu số...

Ví dụ hoàn chỉnh

<html>
  <head>
    <title>Validation Form JavaScript</title>
    <script>
      function validate() {
        if (document.myForm.Name.value == "") {
          alert("Vui lòng nhập tên!");
          document.myForm.Name.focus();
          return false;
        }
        if (document.myForm.EMail.value == "") {
          alert("Vui lòng nhập Email!");
          document.myForm.EMail.focus();
          return false;
        }
        if (document.myForm.Zip.value == "" || isNaN(document.myForm.Zip.value) || document.myForm.Zip.value.length != 5) {
          alert("Vui lòng nhập mã ZIP 5 chữ số!");
          document.myForm.Zip.focus();
          return false;
        }
        if (document.myForm.Country.value == "-1") {
          alert("Vui lòng chọn quốc gia!");
          return false;
        }
        return true;
      }
    </script>
  </head>
  <body>
    <form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return validate()">
      <table cellspacing="2" cellpadding="2" border="1">
        <tr><td align="right">Tên</td><td><input type="text" name="Name"/></td></tr>
        <tr><td align="right">Email</td><td><input type="text" name="EMail"/></td></tr>
        <tr><td align="right">Mã ZIP</td><td><input type="text" name="Zip"/></td></tr>
        <tr><td align="right">Quốc gia</td><td>
          <select name="Country">
            <option value="-1" selected>[Chọn quốc gia]</option>
            <option value="1">USA</option>
            <option value="2">UK</option>
            <option value="3">INDIA</option>
          </select></td></tr>
        <tr><td align="right"></td><td><input type="submit" value="Gửi"/></td></tr>
      </table>
    </form>
  </body>
</html>