Hướng dẫn return false in javascript - trả về sai trong javascript

Trong bài này chúng ta sẽ tìm hiểu return true và return false trong Javascript. Đây là câu hỏi thường gặp khi học lập trình javascript căn bản.return truereturn false trong Javascript. Đây là câu hỏi thường gặp khi học lập trình javascript căn bản.

Hướng dẫn return false in javascript - trả về sai trong javascript

Hướng dẫn return false in javascript - trả về sai trong javascript

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Chúng ta đã được học function trong Javascript. và trong bài đó mình cũng đã giải thích về từ khóa return rồi. Nếu bạn chưa hiểu về từ khóa này thì hãy quay lại và xem bài đó trước nhé.

Về cơ bản thì return true / false là kết quả trả về của một hàm. Nhưng khi hàm đó được gắn vào một sự kiện của javascript thì nó có thêm một vài công dụng khác. Chi tiết thế nào thì chúng ta cùng tìm hiểu ngay nhé.return true / false là kết quả trả về của một hàm. Nhưng khi hàm đó được gắn vào một sự kiện của javascript thì nó có thêm một vài công dụng khác. Chi tiết thế nào thì chúng ta cùng tìm hiểu ngay nhé.

1. Return true / false của function javascript

Khi một hàm return false thì tức là nó trả về một giá trị false thuộc kiểu boolean, còn return true thì trả về giá trị true và cũng thuộc kiểu boolean.return false thì tức là nó trả về một giá trị false thuộc kiểu boolean, còn return true thì trả về giá trị true và cũng thuộc kiểu boolean.

Bài viết này được đăng tại [free tuts .net]

Ví dụ: Hãy xem kết quả trả về của hàm dưới đây.: Hãy xem kết quả trả về của hàm dưới đây.

function checkSomething(){
    return true;
}

var flag = checkSomething();

console.log(flag); // True

Mình đã dùng biến flag để lưu trữ kết quả trả về của hàm checkSomething, vì vậy biến này sẽ có giá trị là true.true.

Ví dụ: Hàm kiểm tra số chẵn.: Hàm kiểm tra số chẵn.

function laSoChan(num){
    return (num % 2 == 0);
}

console.log(laSoChan(2)); // True
console.log(laSoChan(3)); // False
console.log(laSoChan(5)); // False

Hàm laSoChan return true nếu khi thực hiện phép chia lấy dư số truyền vào cho 2 thì sẽ trả về 0, ngược lại thì return false.return true nếu khi thực hiện phép chia lấy dư số truyền vào cho 2 thì sẽ trả về 0, ngược lại thì return false.

2. Return true/false trong sự kiện Javascript

Javascript có thể can thiệp đến các sự kiện của các đối tượng HTML một cách dễ dàng. Nó có thể quyết định đến việc cho phép sự kiện xảy ra hoặc không cho phép xảy ra.

  • Nếu sự kiện return true thì tức là cho phép sự kiện xảy ra.return true thì tức là cho phép sự kiện xảy ra.
  • Còn return false là không cho phép sự kiện xảy ra.return false là không cho phép sự kiện xảy ra.

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.: Return tại đoạn code event trong HTML luôn.

<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.: 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.

<script language="javascript">
function check()
{
    return false; 
}
</script>
<input type="text" onkeypress="return check()" /> 

Ví dụ: Sự kiện onclick return false.: Sự kiện onclick return false.

Mình sẽ return false cho sự kiện click xem chuyện gì xảy ra nhé.

<form method="get">
    <input type="submit" onclick="return validate()" value="Submit"/>
</form>
<script>
    function validate(){
        return false;
    }
</script>

Trong ví dụ này, khi click vào nút submit thì form sẽ không được submit, bởi sự kiện này không được kích hoạt, lý do là ta đã return về false.

Nhưng nếu sửa lại code trong thẻ input thành như thế này thì vẫn submit bình thường.

<form method="get">
    <input type="submit" onclick="validate()" value="Submit"/>
</form>
<script>
    function validate(){
        return false;
    }
</script>

Lý do là ta gán một hành động vào sự kiện click

function laSoChan(num){
    return (num % 2 == 0);
}

console.log(laSoChan(2)); // True
console.log(laSoChan(3)); // False
console.log(laSoChan(5)); // False
0 chứ không phải gán một hành động quyết định đến sự kiện (tức là không có lệnh return)

Lưu ý: 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 dùng sự kiện

function laSoChan(num){
    return (num % 2 == 0);
}

console.log(laSoChan(2)); // True
console.log(laSoChan(3)); // False
console.log(laSoChan(5)); // False
1 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
function laSoChan(num){
    return (num % 2 == 0);
}

console.log(laSoChan(2)); // True
console.log(laSoChan(3)); // False
console.log(laSoChan(5)); // False
2.
: 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 dùng sự kiện
function laSoChan(num){
    return (num % 2 == 0);
}

console.log(laSoChan(2)); // True
console.log(laSoChan(3)); // False
console.log(laSoChan(5)); // False
1 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
function laSoChan(num){
    return (num % 2 == 0);
}

console.log(laSoChan(2)); // True
console.log(laSoChan(3)); // False
console.log(laSoChan(5)); // False
2.

3. Bài tập validate form sử dụng return trong javascript

Trong bài tập này ta sẽ sử dụng sự kiện onclick của nút

function laSoChan(num){
    return (num % 2 == 0);
}

console.log(laSoChan(2)); // True
console.log(laSoChan(3)); // False
console.log(laSoChan(5)); // False
3, đồ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:

Hướng dẫn return false in javascript - trả về sai trong javascript

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
    function laSoChan(num){
        return (num % 2 == 0);
    }
    
    console.log(laSoChan(2)); // True
    console.log(laSoChan(3)); // False
    console.log(laSoChan(5)); // False
    4
  • Sử dụng
    function laSoChan(num){
        return (num % 2 == 0);
    }
    
    console.log(laSoChan(2)); // True
    console.log(laSoChan(3)); // False
    console.log(laSoChan(5)); // False
    5 trong sự kiện
    function laSoChan(num){
        return (num % 2 == 0);
    }
    
    console.log(laSoChan(2)); // True
    console.log(laSoChan(3)); // False
    console.log(laSoChan(5)); // False
    6 của button Register
  • Trong hàm
    function laSoChan(num){
        return (num % 2 == 0);
    }
    
    console.log(laSoChan(2)); // True
    console.log(laSoChan(3)); // False
    console.log(laSoChan(5)); // False
    4 sử dụng DOM để lấy giá trị các ô input, sau đó kiểm tra các giá trị và return về
    function laSoChan(num){
        return (num % 2 == 0);
    }
    
    console.log(laSoChan(2)); // True
    console.log(laSoChan(3)); // False
    console.log(laSoChan(5)); // False
    8DOM để lấy giá trị các ô input, sau đó kiểm tra các giá trị và return về
    function laSoChan(num){
        return (num % 2 == 0);
    }
    
    console.log(laSoChan(2)); // True
    console.log(laSoChan(3)); // False
    console.log(laSoChan(5)); // False
    8

Bài giải như sau::

<!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>

Đoạn code nằm trong thẻ input

function laSoChan(num){
    return (num % 2 == 0);
}

console.log(laSoChan(2)); // True
console.log(laSoChan(3)); // False
console.log(laSoChan(5)); // False
9 chính là gắn một hành động quyết định đến việc sự kiện có xảy ra hay không.

4. Lời kết

Như vậy là chúng ta đã học xong cách sử dụng lệnh return true và return false trong javascript. Qua bài học này bạn phải hiểu ý nghĩa của lệnh return khi gọi đến các hàm trong các sự kiện của javascript. Bài này cũng không quá phức tạp, chỉ là sự kết hợp giữa hàm và sự kiện.return truereturn false trong javascript. Qua bài học này bạn phải hiểu ý nghĩa của lệnh return khi gọi đến các hàm trong các sự kiện của javascript. Bài này cũng không quá phức tạp, chỉ là sự kết hợp giữa hàm và sự kiện.