Hướng Dẫn - Tìm Hiểu Và Cách Sử Dụng JQuery Validation - VNXF

• Trang chủ
• Diễn đàn Bài viết mới Tìm chủ đề
• Có gì mới Nội dung nổi bật Bài viết mới Bài mới trên hồ sơ Hoạt động mới nhất
• DV XenForo
• Liên hệ
• Chinese English Italian Japanese Korean Vietnamese

Đăng nhập Đăng ký Có gì mới? Tìm kiếm

Tìm kiếm

Everywhere Chủ đề This forum This thread Chỉ tìm trong tiêu đề Note Bởi: Tìm Tìm kiếm nâng cao…

• Bài viết mới
• Tìm chủ đề

Menu Đăng nhập Đăng ký Install the app Cài đặt How to install the app on iOS

Follow along with the video below to see how to install our site as a web app on your home screen.

Note: This feature may not be available in some browsers.

• NEW Nâng cấp VNXF 2025 - Xf 2.3.4, PHP 8.3, giao diện sáng tối

• Trang chủ
• Diễn đàn
• CSS/HTML/Javascript
• JavaScript/jQuery

You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser. Hướng dẫnTìm hiểu và cách sử dụng jQuery Validation

• Thread starter Thread starter PVS
• Ngày gửi Ngày gửi 23/06/2017
• Từ khóa Từ khóa jquery lap trinh ngon ngu validation vnxf vnxf.vn website xenforo

PVS

Super Moderator

Thành viên BQT Tìm hiểu và cách sử dụng jQuery Validation Giới thiệu và Cài đặt Tác giả: Jörn Zaefferer Website: http://jqueryvalidation.org ​jQuery Validation được xây dựng giúp các lập trình viên có thể xác thực được những thông tin người dùng nhập vào Form một cách nhanh chóng và dễ dàng. Để có thể cài đặt jQuery Validate các bạn cần thực hiện các bước sau:

1. Truy cập vào https://github.com/jzaefferer/jquery-validation và nhấn vào nút “Download ZIP”.
2. Giải nén file vừa tải về, chúng ta sẽ được cấu trúc thư mục như sau:
3. Các bạn hãy vào folder “dist” và sau đó copy file “jquery.validate.min.js”.
4. Sau đó, các bạn hãy bỏ vào folder chứa website mà chúng ta xây dựng.
5. Tiến hành thêm thư viện vào trong website của chúng ta, nhưng các bạn cũng cần phải tải thư viện jQuery tại http://jquery.com về trước nhé:
6. (Tùy chọn) Nếu như các bạn không thích tải về thư viện jQuery Validation hoặc kể cả jQuery, các bạn có thể dùng các đường link CDN sau đây: Mã: <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
7. Cài đặt hoàn tất.

II. Sử dụng Để sử dụng jQuery Validation các bạn cần phải biết qua phương thức “$(‘#id_cua_form’).validate()” (Nếu dùng class thì các bạn hãy tự thay thế). Chúng ta sẽ có cấu trúc HTML đơn giản như sau: Mã: <form method="get" accept-charset="utf-8" style="width:600px;margin: 0px auto;" id="formDemo"> <fieldset> <legend>Demo jQuery Validation</legend> <div> <label>Họ</label> <input name="ho" type="text" placeholder="Vui lòng nhập họ" required> </div> <div> <label>Tên</label> <input name="ten" type="text" placeholder="Vui lòng nhập tên" required> </div> <div> <label>Địa chỉ</label> <input name="diachi" type="text" placeholder="Vui lòng nhập địa chỉ" required> </div> <button type="submit">Gửi</button> </fieldset> </form> Và cấu trúc thẻ <script>: Mã: $(document).ready(function() { //Khi bàn phím được nhấn và thả ra thì sẽ chạy phương thức này $("#formDemo").validate({ rules: { ho: "required", ten: "required", diachi: { required: true, minlength: 2 } }, messages: { ho: "Vui lòng nhập họ", ten: "Vui lòng nhập tên", diachi: { required: "Vui lòng nhập địa chỉ", minlength: "Địa chỉ ngắn vậy, chém gió ah?" } } }); }); Khi chạy nó, các bạn sẽ thấy thư viện của chúng ta sẽ thực hiện “Xác thực” (Validate) khi chúng ta nhấn vào nút “Submit” thì ở đây nó chính là nút “Gửi”. Hoặc các bạn có thể gõ vài dòng chữ vào và nhận ra sự khác biệt khi xóa đi. Đó chính là những đoạn thông báo nhỏ như sau: ​Rất là đẹp mắt phải không các bạn? Nhưng thật ra để được vậy thì các bạn phải có CSS vào nữa đấy chứ thật ra Form này khi không có CSS thì các bạn sẽ thấy nó chạy lung tung. Mình sẽ giải thích một tí về đoạn script mà chúng ta viết:

1. Phương thức “validate()” chấp nhận 1 đối số là một đối tượng có 2 thuộc tính chính là “rules” và “messages”.
2. Trong đó, “rules” đại diện cho điều kiện xác thực như “required”(Không bỏ trống), “minlength”(Độ dài tối thiểu)…và “messages” đại diện cho các thông báo lỗi mà chúng ta đã thấy ở ví dụ trên.
3. Và thuộc tính “rules” của chúng ta sẽ lại bao gồm các phần tử con cũng là một đối tượng với các thuộc tính bên trong nó chính là thuộc tính “name” bên trong các thẻ “input” của chúng ta. Các bạn có thể xem qua hình ảnh sau:
4. Rất đơn giản phải không nào? “messages” cũng sẽ tương tự “rules” và nếu bạn tinh ý sẽ nhận ra là kể cả điều kiện bên trong nó như “required”, “minlength” cũng sẽ tương đồng với bên “messages”. Hai cái chỉ khác nhau về công việc mà thôi.
5. Như vậy, chúng ta đã hoàn tất được công việc “Validate” rồi đấy.

Chúng ta sẽ có cấu trúc hoàn chỉnh như sau: Mã: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery Validation</title> <style type="text/css"> label { display: inline-block; width: 150px; } input[type="text"], input[type="password"] { display: inline-block; width: 200px; } label.error { display: inline-block; color:red; width: 200px; } </style> <!-- Load Thư viện jQuery vào trước khi load jQuery Validate--> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> </head> <body> <form method="get" accept-charset="utf-8" style="width:600px;margin: 0px auto;" id="formDemo"> <fieldset> <legend>Demo jQuery Validate</legend> <div> <label>Họ</label> <input name="ho" type="text" placeholder="Vui lòng nhập họ" required> </div> <div> <label>Tên</label> <input name="ten" type="text" placeholder="Vui lòng nhập tên" required> </div> <div> <label>Địa chỉ</label> <input name="diachi" type="text" placeholder="Vui lòng nhập địa chỉ" required> </div> <button type="submit">Gửi</button> </fieldset> </form> <script type="text/javascript"> $(document).ready(function() { //Khi bàn phím được nhấn và thả ra thì sẽ chạy phương thức này $("#formDemo").validate({ rules: { ho: "required", ten: "required", diachi: { required: true, minlength: 2 } }, messages: { ho: "Vui lòng nhập họ", ten: "Vui lòng nhập tên", diachi: { required: "Vui lòng nhập địa chỉ", minlength: "Địa chỉ ngắn vậy, chém gió ah?" } } }); }); </script> </body> </html> Ngoài ra, mình sẽ gửi thêm cho các bạn một file demo khác để giúp các bạn hình dung rõ ràng hơn như sau: Mã: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery Validate</title> <style type="text/css"> label { display: inline-block; width: 150px; } input[type="text"], input[type="password"] { display: inline-block; width: 200px; } label.error { display: inline-block; color:red; width: 200px; } </style> <!-- Load Thư viện jQuery vào trước khi load jQuery Validate--> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> </head> <body> <form method="get" accept-charset="utf-8" style="width:600px;margin: 0px auto;" id="formDemo"> <fieldset> <legend>Demo jQuery Validate</legend> <div> <label>Họ</label> <input name="ho" type="text" placeholder="Vui lòng nhập họ" required> </div> <div> <label>Tên</label> <input name="ten" type="text" placeholder="Vui lòng nhập tên" required> </div> <div> <label>Địa chỉ</label> <input name="diachi" type="text" placeholder="Vui lòng nhập địa chỉ" required> </div> <div> <label>Số điện thoại</label> <input name="sodienthoai" type="text" placeholder="Vui lòng nhập số điện thoại" required> </div> <div> <label>Email</label> <input name="email" type="text" placeholder="Vui lòng nhập Email" required> </div> <div> <label>Mật khẩu</label> <input id="password" name="password" type="password" placeholder="Vui lòng nhập Password" required> </div> <div> <label>Nhập lại mật khẩu</label> <input name="confirm_password" type="password" placeholder="Vui lòng nhập lại Password" required> </div> <div> <label>Điều khoản</label> <input name="dieukhoan" type="checkbox"> </div> <div> <label>Thông tin thêm</label> <input name="thongtinthem" type="text" placeholder="Tùy chọn..."> </div> <button type="submit">Gửi</button> </fieldset> </form> <script type="text/javascript"> $(document).ready(function() { //Khi bàn phím được nhấn và thả ra thì sẽ chạy phương thức này $("#formDemo").validate({ rules: { ho: "required", ten: "required", diachi: { required: true, minlength: 2 }, sodienthoai: { required: true, minlength: 5 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, dieukhoan: "required" }, messages: { ho: "Vui lòng nhập họ", ten: "Vui lòng nhập tên", diachi: { required: "Vui lòng nhập địa chỉ", minlength: "Địa chỉ ngắn vậy, chém gió ah?" }, sodienthoai: { required: "Vui lòng nhập số điện thoại", minlength: "Số máy quý khách vừa nhập là số không có thực" }, password: { required: 'Vui lòng nhập mật khẩu', minlength: 'Vui lòng nhập ít nhất 5 kí tự' }, confirm_password: { required: 'Vui lòng nhập mật khẩu', minlength: 'Vui lòng nhập ít nhất 5 kí tự', equalTo: 'Mật khẩu không trùng' }, email: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Vui lòng nhập Email", agree: "Vui lòng đồng ý các điều khoản" } }); }); </script> </body> </html> Các bạn có thể tải các Demo trên tại file đính kèm. Một số điều kiện bên trong jQuery Validation ​Ngoài ra, các bạn có thể tham khảo tại đây http://jqueryvalidation.org/documentation để có thể tìm hiểu thêm về thư viện này. Chúc các bạn thành công. Nguồn: thienanblog.com​

Đính kèm

• demo.zip demo.zip 41.5 KB · Lượt xem: 4

Bài viết liên quan Làm cách nào required upload ảnh khi đăng bài lên blog bởi Phucphuc, 13/07/2024 Tôi muốn dùng ảnh bài viết làm ảnh bìa blog Sngine bởi nguyenlongvn, 30/06/2024 Sử dụng Console của Chrome hoặc Firefox bởi 70211119, 24/11/2021 Tìm hiểu về Javascript từ cơ bản đến nâng cao bởi anhngan21, 05/10/2021 Nhờ code thêm tìm sản phẩm cho Input "Search" và thêm nút Share cho từng sản phẩm. bởi Hoa Lan Vang, 05/04/2021 Hỏi về cách lấy id trong jquery bởi logitech, 24/12/2020 Bài viết mới Làm cách nào required upload ảnh khi đăng bài lên blog bởi Phucphuc, 13/07/2024 Tôi muốn dùng ảnh bài viết làm ảnh bìa blog Sngine bởi nguyenlongvn, 30/06/2024 Js lúc hoạt động lúc không web xổ số bởi wdasd, 09/12/2023 Giúp mình bài code này với huhu bởi Traidau04, 01/12/2023 Sử dụng Console của Chrome hoặc Firefox bởi 70211119, 24/11/2021 Tìm hiểu về Javascript từ cơ bản đến nâng cao bởi anhngan21, 05/10/2021 3,125 0 0 Bạn phải đăng nhập hoặc đăng ký để bình luận.

Chủ đề tương tự

Tìm hiểu sự kiện trong JavaScript và cách bắt sự kiện trong DOM

• PVS
• 29/05/2020
• JavaScript/jQuery

Trả lời 0 Lượt xem 2K 29/05/2020 PVS Hướng dẫn Tìm hiểu và cách sử dụng toàn tập về jQuery Ajax

• PVS
• 24/06/2017
• JavaScript/jQuery

Trả lời 0 Lượt xem 3K 24/06/2017 PVS Hướng dẫn Tìm hiểu và cách sử dụng jQuery Lazy Load

• PVS
• 23/06/2017
• JavaScript/jQuery

Trả lời 1 Lượt xem 3K 23/06/2017 Death Aloha Hướng dẫn Tìm hiểu và cách tạo Tooltip bằng jQuery

• PVS
• 17/04/2017
• JavaScript/jQuery

Trả lời 0 Lượt xem 2K 17/04/2017 PVS Hướng dẫn Tìm hiểu và cách dùng Jquery Spritely

• PVS
• 11/04/2017
• JavaScript/jQuery

Trả lời 0 Lượt xem 1K 11/04/2017 PVS Chia sẻ: Facebook LinkedIn Reddit Pinterest Tumblr WhatsApp Email Chia sẻ Link

Dịch vụ XenForo của VNXF

anhanhxf 0906081284 silzedt_1207 Inbox PVS

Hướng dẫn sử dụng

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Xử lý sự cố (Troubleshooting)

• Làm gì khi tài khoản chủ web bị khóa do đăng nhập sai nhiều lần
• Cách đổi mật khẩu Admin XenForo bằng PhpMyAdmin
• Redirect tên miền trên CloudFlare để giữ từ khóa trên Google

Texlink

Liên hệ đặt Textlink Liên hệ đặt Textlink Liên hệ đặt Textlink Liên hệ đặt Textlink

Nhà Tài Trợ

• Trang chủ
• Diễn đàn
• CSS/HTML/Javascript
• JavaScript/jQuery

Back Top