Như vậy là mình đã giới thiệu xong phương thức POST và phương thức GET rồi nhỉ =)) Vậy trong bài này mình sẽ hướng dẫn một phần rất thú vị đó là validate form bằng Javascript.

Khi bạn muốn lấy thông tin từ user thì bắt buộc bạn phải sử dụng form. Trường hợp user không có ý đồ xấu thì không sao nhưng nếu gặp những user có ý đồ xấu muốn phá hoại hoặc gây cản trở công việc của người quản trị thì họ sẽ nhập những thông tin ảo hoặc những thông tin chứa mã độc thì rất là tai hại. Một câu hỏi đặt ra là có cách nào chống lại vấn đề này không? Có đấy, chứ nếu không có thì các websites đã xụp lâu rồi 😀

Trước khi insert thông tin vào trong database thì ta phải qua một bước và bước này ta gọi là validate. nhiệm vụ của bước này là kiểm tra dữ liệu có hợp lệ hay không? Nếu hợp lệ thì thêm vào database và ngược lại sẽ thông báo cho user là dữ liệu không hợp lệ. Chúng ta có hai bước validate, bước thứ nhất là sử dụng javascript và bước thứ 2 là sử dụng mã code PHP. Trong bài này mình sẽ trình bày bước thứ nhất.

Nội dung chính

  • 1. Hiểu về lệnh return trong xử lý sự kiện Javascript
  • 2. Sử dụng Javascript để validate form
  • 3. Thông thường cần validate những gì?
  • 4. Lời kết

1. Hiểu về lệnh return trong xử lý sự kiện Javascript

Để xây dựng được chức năng này thì đòi hỏi bạn phải có kiến thức Javascript căn bản, vì vậy nếu bạn chưa biết về Javascript thì hãy học nó đi nhé.

Giả sử mình có form như sau: XEM DEMO

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <title>Tinhoccuaem.com - Validate form = Javascript</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="javascript">
            function validateForm()
            {
                return false;
            }
        </script>
    </head>
    <body>
        <form method="post" action="" onsubmit="return validateForm()">
            Username: <input type="text" name="username" id="username" value=""/> <br/><br/>
            Password: <input type="password" name="password" id="password" value=""/> <br/><br/>
            <input type="submit" name="login" value="Login"/>
        </form>
    </body>
</html>

 

Có hai lưu ý:

  • Mình bổ sung một hàm vào sự kiện onsubmit của form onsubmit="return validateForm()".
  • Trong hàm Javascript mình có return về false.
    1
    2
    3
    4
    function validateForm()
    {
        return false;
    }

Bây giờ bạn chạy lên và click vào nút login xem form có reload không nhé. Không reload phải không nào 😀 Có một lý do dẫn đến tình trạng này đó là mình đã gán return validateForm() cho sự kiện onsubmit của form, nghĩa là để quyết định sự kiện submit có được kích hoạt hay không là phụ thuộc vào kết quả của hàm validateForm(), mà hàm validateForm() mình lại return về false tức là không cho phép submit nên không thể submit form đó được. Bây giờ bạn thử đổi lại return true thì sẽ submit được.

Vậy để quyết định một sự kiện nào đó được kích hoạt hay không thì ta chỉ cần return true hoặc false.

2. Sử dụng Javascript để validate form

Quay lại bài toán trên mình sẽ viết lại cho hàm validateForm() như sau:

XEM DEMO

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function validateForm()
{
    // Bước 1: Lấy giá trị của username và password
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    // Bước 2: Kiểm tra dữ liệu hợp lệ hay không
    if (username == ''){
        alert('Bạn chưa nhập tên đăng nhập');
    }
    else if (password == '')
    {
        alert('Bạn chưa nhập mật khẩu');
    }
    else{
        alert('Dữ liệu hợp lệ, ta có thể chấp nhận submit form');
        return true;
    }
    return false;
}

 

Bây giờ bạn thử click vào nút đăng nhập lại xem kết quả như thế nào nhé 🙂

Nếu bạn muốn tìm hiểu thêm các hàm validate data trong Javasccript thì có thể đọc bài “một số hàm validate trong javascript”.

3. Thông thường cần validate những gì?

Mỗi ứng dụng có những loại dữ liệu khác nhau nên việc liệt kê ra hết là điều không thể, chính vì vậy trong bài này mình  chỉ đưa ra một số loại dữ liệu mà ta thường validate nhé.

  • Kiểm tra dữ liệu không được rỗng
  • Kiểm tra có phải đúng định dạng email
  • Kiểm tra có phải đúng định dạng URL
  • Kiểm tra có phải đúng định dạng hình ảnh
  • Kiểm tra có phải đúng định dạng số điện thoại
  • … ngoài ra còn nhiều trường hợp và phụ thuôc vào dư án.

Cách thông thường nhất là chúng ta sử dụng RegEx để kiểm tra định dạng dữ liệu.

4. Lời kết

Qua bài này mình đã giải thích cho các ban hiểu lệnh return và tầm quan trọng của lệnh return trong việc validate form với Javascript. Trên thực tế thì khi bạn validate form bằng Javascript chỉ mang tính chất là giúp website thân thiện với người dùng thôi, nghĩa là họ sẽ không cảm thấy khó chịu vì khi họ click submit thì ta sẽ thông báo ngay và luôn chứ không cần phải refresh lại trang. Nếu một người cố tình tấn công phá hoại thông qua đường này thì bạn phải validate thêm ở phía server nữa vì khi người dùng tắt Javascript ở Browser thì chức năng này sẽ không hoạt động được.

 

200 BÌNH LUẬN

  1. It is in point of fact a great and helpful piece of info.
    I’m glad that you just shared this helpful
    info with us. Please stay us informed like this.
    Thank you for sharing.

  2. Aw, this was an exceptionally nice post. Spending some time and actual effort to create a really good article… but
    what can I say… I hesitate a lot and never seem to get
    anything done.

  3. Hi there everyone, it’s my first pay a visit at this web site,
    and paragraph is genuinely fruitful in support of me, keep up posting
    such articles.

  4. With havin so much content and articles do you ever
    run into any problems of plagorism or copyright violation? My website has a lot
    of completely unique content I’ve either created
    myself or outsourced but it appears a lot of it is popping it up all over the internet without my authorization. Do you
    know any ways to help prevent content from being
    ripped off? I’d genuinely appreciate it.

  5. I feel that is among the so much important info for me.
    And i’m satisfied reading your article. However want to observation on few common issues, The website taste is
    perfect, the articles is in reality great : D. Just right task,
    cheers

  6. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.
    You obviously know what youre talking about, why waste your intelligence on just
    posting videos to your blog when you could be giving us something enlightening to read?

  7. Great beat ! I would like to apprentice at the same time as you amend your
    site, how could i subscribe for a weblog web site?

    The account helped me a appropriate deal.
    I had been tiny bit familiar of this your broadcast provided vibrant clear idea

  8. Good day! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any
    suggestions?

  9. Wow! This could be one particular of the most helpful blogs We have ever arrive across on this subject. Basically Wonderful. I am also an expert in this topic so I can understand your hard work.

  10. I will immediately grab your rss feed as I can not find your e-mail subscription link or e-newsletter service. Do you have any? Please let me know in order that I could subscribe. Thanks.

  11. That is a really good tip particularly to those fresh to the blogosphere. Brief but very accurate information Appreciate your sharing this one. A must read post!

  12. My spouse and I stumbled over here from a different web address and thought I might check things out. I like what I see so now i am following you. Look forward to checking out your web page yet again.

  13. Usually I don at learn article on blogs, but I wish to say that this write-up very compelled me to take a look at and do it! Your writing taste has been surprised me. Thanks, very nice post.

  14. Spot on with this write-up, I actually feel this web site needs a great deal more attention. I all probably be back again to read more, thanks for the information!

  15. Wow that was odd. I just wrote an really long comment but after I clicked submit my comment didn’t show up.
    Grrrr… well I’m not writing all that over again. Anyhow,
    just wanted to say superb blog!

  16. Es muy frecuente que este mal aparezca por derivación de problemas psicológicos, como los mencionados de vivir en una sociedad exigente como la nuestra, en la que la virilidad se encuentra socialmente relacionada con el éxito profesional y social, y en la que se exige más de lo que se debe en el plano sexual, condicionado por lo que creemos que es lo correcto, etc.

  17. I like the helpful info you provide in your articles.

    I’ll bookmark your weblog and check again here regularly.

    I am quite certain I will learn many new stuff right here!
    Good luck for the next!

  18. The interface is colorful, has more flair, and some cool features like аАа’аАТ‚аЂТ˜Mixview a that let you quickly see related albums, songs, or other users related to what you are listening to.

  19. I absolutely love your blog and find almost all of your post’s to be just what I’m looking for.

    Would you offer guest writers to write content for you? I wouldn’t mind publishing a post or elaborating on some
    of the subjects you write concerning here.
    Again, awesome website!

  20. Hey there! Do you know if they make any plugins
    to help with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m
    not seeing very good results. If you know of any please
    share. Cheers!

  21. I was recommended this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You are wonderful! Thanks!

  22. You could definitely see your skills within the paintings you write. The arena hopes for more passionate writers such as you who aren at afraid to say how they believe. At all times follow your heart.

  23. I’а†ve read some good stuff here. Certainly price bookmarking for revisiting. I surprise how a lot attempt you set to create one of these excellent informative site.

  24. Very nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I all be subscribing to your rss feed and I hope you write again soon!

  25. I think other web site proprietors should take this site as an model, very clean and fantastic user genial style and design, as well as the content. You are an expert in this topic!

  26. You could definitely see your skills within the paintings you write. The arena hopes for more passionate writers such as you who aren at afraid to say how they believe. At all times follow your heart.

  27. Thanks a bunch for sharing this with all of us you really know what you are talking about! Bookmarked. Please also visit my website =). We could have a link exchange arrangement between us!

  28. We stumbled over here from a different site and thought I should check things out. I such as what My partner and i see so i am just following anyone. Look forwards to looking at your site repeatedly.

  29. I think other web-site proprietors should take this site as an model, very clean and excellent user friendly style and design, as well as the content. You are an expert in this topic!

THOÁT KHỎI BÌNH LUẬN

Please enter your comment!
Please enter your name here