Bài 15: Return TRUE/FALSE của Events trong Javascript

Trải qua 14 bài học vừa qua thì bạn cũng đã nắm được một số kiến thức khá vững về javascript rồi đấy. Để bổ sung skill cho các bạn thì trong bài này mình sẽ hướng dẫn các bạn cách validate một form căn bản bằng cách sử dụng sự kiện onsubmit của form hoặc là onclick của nút submit, đồng thời mục đích chính là hướng dẫn bạn cách phân biệt return trong events.

Vì chúng ta chưa học đến các kỹ thuật cao như Regular Expression nên trong bài này mình chỉ thực hành validate đơn giản, mục đích là hướng dẫn các bạn các bước validate và cách sử dụng lệnh return đúng nhất.

1. Return true/false của Events trong Javascript

Có lẽ bạn thắc mắc tại sao lại nêu ra vấn đề return true/false này nhỉ ?. Đây là một vấn đề khá quan trọng đấy nếu bạn sử dụng không đúng thì bạn sẽ không biết tại sao mình code sai và không biết chỗ nào để sửa cả.

Trong một sự kiện sẽ có hai trạng thái là hành động đúng (TRUE) và hành động sai (FALSE) và để thể hiện hai trạng thái này thì ta sử dụng cú pháp return TRUE/FAlSE trong function của event.

Có hai cách return thông dụng nhất như sau:

  • Cách 1: Return tại đoạn code event trong HTML luôn, ví dụ:
    <input type="text" onkeypress="return false" />
  • Cách 2: Tạo một hàm xử lý sự kiện, lúc này hàm này phải return và trong HTML bạn cũng phải return, ví dụ:
    <script language="javascript">
    function check()
    {
        return false; 
    }
    </script>
    <input type="text" onkeypress="return check()" /> 

Bạn phải thực sự hiểu ý nghĩa của từng loại sự kiện trong javascript thì mới áp dụng đúng được. ví dụ mình cần viết chương trình không cho người dùng nhập bất kỳ chữ gì vào một ô input thì nếu bạn sử dụng sự kiện onkeyup sẽ sai, lý do là sự kiện này sảy ra khi bạn nhã phím nên bạn nhập rồi nó mới kích hoạt. Thay vì vậy thì bạn sử dụng sự kiện onkeypress sẽ thành công.

2. Bài tập validate form đơn giản với Event và DOM

Trong bài tập này ta sẽ sử dụng sự kiện onclick của nút submit, đồng thời sử dụng DOM để lấy các giá trị trong form.

Giả sử ta có đoạn HTML sau:

<!DOCTYPE html>
<html>
    <body>
      <form method="post" action="">
        Username: <input type="text" value="" name="username" id="username"/> <br/>
        Password: <input type="text" value="" name="password" id="password"/> <br/>
        Re Password: <input type="text" value="" name="re-password" id="re-password"/> <br/>
		<input type="submit" value="Register" />        
      </form>
    </body>
</html>

Và đây là giao diện khi chạy lên:

validate-form-basic.png

Yêu cầu của bài tập như sau:

  • Tên đăng nhập không được để trống
  • Mật khẩu không được để trống
  • Mật khẩu nhập lại phải giống với mật khẩu đã nhập ở trên

Hướng giải:

  • Tạo một javascript function validate() 
  • Sử dụng return validate() trong sự kiện onclick của button Register
  • Trong hàm validate() sử dụng DOM để lấy giá trị các ô input, sau đó kiểm tra các giá trị và return về true/false

Bài giải: XEM DEMO

<!DOCTYPE html>
<html>
    <body>
        <script language="javascript">
          function validate()
          {
            
             // Lấy giá trị
             var username = document.getElementById("username").value;
             var password = document.getElementById("password").value;
             var re_password = document.getElementById("re-password").value;
          	
              // Kiểm tra các giá trị
            if (username == ""){
              alert("Bạn chưa nhập tên đăng nhập");
              return false;
            }
          
            if (password == ""){
              alert("Bạn chưa nhập mật khẩu");
              return false;
            }
            
          
            if (password != re_password){
              alert("Mật khẩu nhập lại không đúng");
              return false;
            }
          
            return true;
          }
        </script>
        <form method="post" action="">
            Username: <input type="text" value="" name="username" id="username"/> <br/>
            Password: <input type="text" value="" name="password" id="password"/> <br/>
            Re Password: <input type="text" value="" name="re-password" id="re-password"/> <br/>
            <input type="submit" value="Register" onclick="return validate()" />        
        </form>
    </body>
</html>

Bạn chú ý trong button mình có thêm một sự kiện onclick đấy nhé.

3. Lời kết

Tóm lại return của events trong javascript dùng để xác nhận một sự kiện nào đó thực thi thành công hay thất bại, từ đó đối tượng HTML sẽ có những xử lý cho phép hoặc không cho phép thao tác đó thực hiện. Thông thường chúng ta hay vận dụng nó trong các bài toán validate form hoặc những bài toán liên quan đến sự kiện trong javascript.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.