Ví dụ kiểm tra form hợp lệ với Javascript

Thực sự chúng ta có thể "mì ăn liền" với chức năng kiểm tra form hợp lệ bởi cũng có nhiều source miễn phí và không miễn phí được viết gói gọn chỉ cần bỏ vào dùng là xong. Từ khi có Jquery số ứng dụng kiểm tra form là khá nhiều, tuy nhiên bạn hoàn toàn có thể xây dựng cho mình một ứng dụng Javascript để kiểm tra hợp lệ cho form,  điều này giúp bạn làm chủ code của mình tốt hơn và hoàn toàn có thể tùy chỉnh ứng dụng theo ý của bạn đồng thời nếu bạn đang muốn phát triển về Javascript thì cũng là một ví dụ bổ ích.

Để diễn giải và mô tả cách thức sao cho giễ hiểu tôi thấy thực sự khó khăn sau khi đã thực hiện xong, nhưng tôi cũng sẽ nói một cách ngắn gọn, xúc tích và kết hợp với chú thích trong đoạn code.

Ý tưởng

Tạo ra hàm kiểm tra hợp lệ bằng cách dùng vòng for lặp qua từng phần tử input trong form, tạo ra một phần tử để hiển thị thông tin lỗi, trong vòng for kiểm tra sự hợp lệ của từng phần tử nếu có lỗi lưu nội dung lỗi vào phần tử đã tạo ra, cuối vòng for nếu phần tử hiển thị thông tin lỗi có nội dung lỗi thì chèn vào sau phần tử vừa mới kiểm tra. Tạo xong hàm kiểm tra lỗi thì gọi nó bằng cách gán vào sự kiện submit của form hoặc sự kiện click lên nút submit, có thể kết hợp thêm sự kiện onchange để kiểm tra ngay khi vừa thay đổi nội dung phần tử input.

HTML code

<form method="post" action="#" name="register">
   <p>
     <label for="username">Tên đăng nhập(*)</label>
     <input class="text" type="password" name="username" id="username" /></p>
  <p>
     <label for="password">Password(*)</label>
     <input class="text" type="password" name="password" id="password" /></p>
  <p>
     <label for="confirm_pass">Nhập lại password(*)</label>
     <input class="text" type="password" name="confirm_pass" id="confirm_pass" /></p>
  <p>
      <label for="lastname">Họ của bạn(*)</label>
     <input class="text" type="text" name="lastname" id="lastname" /></p>
  <p>
      <label for="firstname">Tên của bạn(*)</label>
     <input class="text" type="text" name="firstname" id="firstname" /></p>
   <p>
     <label for="email">Email(*)</label>
     <input class="text" type="text" name="email" id="email" /></p>
  <p>
      <label for="phone">Số điện thoại(*)</label>
      <input class="text" type="text" name="phone" id="phone" /></p>
               
  <p>
      <label id="bottom">submit</label>
      <input type="submit" name="action" id="submit" value="Đăng ký" /></p>
</form>

Javascript code

var inputs = document.forms['register'].getElementsByTagName('input');
  var run_onchange = false;
  function valid(){
   var errors = false;
   var reg_mail = /^[A-Za-z0-9]+([_\.\-]?[A-Za-z0-9])*@[A-Za-z0-9]+([\.\-]?[A-Za-z0-9]+)*(\.[A-Za-z]+)+$/;
   for(var i=0; i<inputs.length; i++){
    var value = inputs[i].value;
    var id = inputs[i].getAttribute('id');
   
    // Tạo phần tử span lưu thông tin lỗi
    var span = document.createElement('span');
    // Nếu span đã tồn tại thì remove
    var p = inputs[i].parentNode;
    if(p.lastChild.nodeName == 'SPAN') {p.removeChild(p.lastChild);}
   
    // Kiểm tra rỗng
    if(value == ''){
     span.innerHTML ='Thông tin được yêu cầu';
    }else{
    // Kiểm tra các trường hợp khác
     if(id == 'email'){
      if(reg_mail.test(value) == false){ span.innerHTML ='Email không hợp lệ (ví dụ: [email protected])';}
      var email =value;
     }
     if(id == 'confirm_email' && value != email){span.innerHTML ='Email nhập lại chưa đúng';}
     // Kiểm tra password
     if(id == 'password'){
      if(value.length <6){span.innerHTML ='Password phải từ 6 ký tự';}
      var pass =value;
     }
     // Kiểm tra password nhập lại
     if(id == 'confirm_pass' && value != pass){span.innerHTML ='Password nhập lại chưa đúng';}
     // Kiểm tra số điện thoại
     if(id == 'phone' && isNaN(value) == true){span.innerHTML ='Số điện thoại phải là kiểu số';}
    }
   
    // Nếu có lỗi thì chèn span vào hồ sơ, chạy onchange, submit return false, highlight border
    if(span.innerHTML != ''){
     inputs[i].parentNode.appendChild(span);
     errors = true;
     run_onchange = true;
     inputs[i].style.border = '1px solid #c6807b';
     inputs[i].style.background = '#fffcf9';
    }
   }// end for
  
   if(errors == false){alert('Đăng ký thành công');}
   return !errors;
  }// end valid()
 
  // Chạy hàm kiểm tra valid()
  var register = document.getElementById('submit');
  register.onclick = function(){
   return valid();
  }
 
  // Kiểm tra lỗi với sự kiện onchange -> gọi lại hàm valid()
   for(var i=0; i<inputs.length; i++){
    var id = inputs[i].getAttribute('id');
    inputs[i].onchange = function(){
     if(run_onchange == true){
      this.style.border = '1px solid #999';
      this.style.background = '#fff';
      valid();
     }
    }
   }// end for

Mô tả

Ở trên tôi có tạo ra biến run_onchange với giá trị mặc định ban đầu là false ý nói rằng chúng ta sẽ không kiểm tra với sự kiện onchange ban đầu, nhưng nếu form có lỗi thì chúng ta sẽ gọi lại hàm valid() để kiểm tra form lại với sự kiện onchange

Trong hàm valid tôi có tạo ra biến errors với giá trị mặc định ban đầu là false ý nói rằng ban đầu form là lý tưởng và không có lỗi, nhưng nếu form có lỗi thì nó sẽ nhận giá trị là true. Kết quả hàm valid trả về là !errors ý nói rằng nếu form có lỗi thì biến errors sẽ nhận giá trị là true nên form sẽ trả về kết quả phủ định của nó là false để form không được kích hoạt, trường hợp không có lỗi thì form sẽ được kích hoạt

Để kiểm tra email tôi có thể sử dụng biểu thức quy tắc trong javascript và trong PHP thì nó cũng tương tự, biểu thức quy tắc dành cho email tôi lưu trong biến reg_mail ở đầu hàm valid(). Trong bài viết sau tôi sẽ có một bài nói rõ về biểu thức quy tắc trong Javascript vì đây là điều cũng khá quan trọng.

Kết luận

Tuy code hơi dài một tí nhưng để viết ứng dụng Javascript thì bạn phải xác địng làm code dài hàng mấy trang. Để sử dụng lại ứng dụng cho những lần sau thì chúng ta sẽ chuyển code viết theo dạng hướng đối tượng khi đó việc sử dụng lại sẽ vô cùng đơn giản và đỡ mất thời gian, trong bài viết sau tôi sẽ giới thiệu về xây dựng ứng dụng hướng đối tượng và có thể dùng lại trong Javascript. Điều cuối cùng tôi muốn nói rằng ví dụ trên có thể là chưa phải tối ưu nhất và bạn có thể tìm ra được những cách làm khác mà bạn cho là tối ưu và hay hơn, tôi mong được trao đổi kinh nghiệm với tất cả các bạn