Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap

Nền tảng Kiến thức - Hành trang tới Tương lai

Chương trình học

Chương 12-Bài 5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: Hồi xưa đó

Xem định dạng IN

Sử dụng VueJS và Bootstrap để tạo trang Liên hệ (contact) có các Ràng buộc kiểm tra dữ liệu như sau:

Yêu cầu

Tạo 1 Form có 4 trường nhập liệu (field / input), với các ràng buộc sau:

Họ tên
1. Bắt buộc nhập (required)
2. Phải nhập từ 5 ký tự trở lên
Email
1. Bắt buộc nhập (required)
2. Phải nhập từ 5 ký tự trở lên
3. Phải nhập đúng định dạng của Email
Sốđiện thoại
1. Bắt buộc nhập (required)
2. Phải nhập từ 5 ký tự trở lên
Lời nhắn
1. Bắt buộc nhập (required)
2. Phải nhập từ 5 ký tự trở lên

Thực hiện

Step 1: Tạo cấu trúc thư mục như sau:

vuejs
|   index.html                                          <- Trang chủ
|   
+---css                                                 <- Thư mục chứa các file CSS dùng trong dự án (tự mình viết)
|       app.css         
+---img                                                 <- Thư mục chứa các ảnh dùng trong dự án
|       ...
|       
+---js                                                  <- Thư mục chứa các file JS dùng trong dự án (tự mình viết)
|       app.js
|       
+---pages                                               <- Thư mục chứa các file HTML (Trang web con); được tố chức theo thư mục để tiện quản lý
|   |   about.html                                      <- Trang Giới thiệu
|   |   contact.html                                    <- Trang Liên hệ
|   |   
|   \---news                                            <- Các trang Tin tức
|           cuoc-song-ict.html
|           hanh-trinh-di-chung-taxi-ve-que.html
|           hien-thuc-hoa-y-tuong.html
|           
\---vendor                                              <- Thư mục chứa các Thư viện bên thứ 3 (3rd party) dùng trong thiết kế giao diện Frontend
    +---bootstrap                                       <- Bootstrap
    |   +---css
    |   \---js
    |               
    +---jquery                                          <- JQuery
    |       jquery.min.js
    |       
    \---vuejs                                           <- VueJS
            vue.js

Step 2: code trong file `pages/contact.html`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liên hệ | NenTang.vn</title>

    <!-- Liên kết CSS Bootstrap -->
    <link href="../../vendor/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

</head>

<body>
    <!-- Khung chứa (container) xử lý render của VueJS -->
    <div id="app">
        <div class="container">
            <h1>Liên hệ</h1>

            <!-- 
                1. Khai bao thuộc tính novalidate="true"
                => không sử dụng Validate (kiểm tra ràng buộc) mặc định của Web Browser
                => chúng ta sẽ sử dụng hàm trong VueJS để kiểm tra (custom validate)
                2. Đăng ký / bắt sự kiện Submit của FORM -> gọi hàm kiemTraDuLieu()
                Sử dụng v-on:submit="kiemTraDuLieu"
                hoặc        @submit="kiemTraDuLieu"
            -->
            <form name="frmLienHe" id="frmLienHe" method="post" action="#" novalidate="true" @submit="kiemTraDuLieu">

                <!-- Nếu có lỗi thì hiển thị thông báo lỗi trong vùng này, sử dụng ALERT BOOTSTRAP -->
                <div class="alert alert-danger" role="alert" v-if="hienThiThongBaoLoi()">
                    <b>Vui lòng kiểm tra lại các lỗi sau:</b>
                    <ul>
                        <li v-for="error in errors">{{ error }}</li>
                    </ul>
                </div>
                <!-- Nếu không có lỗi thì hiển thị thông báo chào mừng trong vùng này, sử dụng ALERT BOOTSTRAP -->
                <div class="alert alert-success" role="alert" v-if="hienThiThongBaoChaoMung()">
                    <b>Dữ liệu đã nhập hợp lệ -> sẽ được gởi đén Server...</b>
                </div>

                <div class="form-row">
                    <div class="col">
                        <div class="form-group">
                            <label>Họ tên</label>
                            <!-- 
                                Data Binding: là quá trình gắn giá trị người dùng nhập trong ô input vào 1 biến cụ thể trong VueJS
                                Sử dụng: v-model="tenbien"
                                Ví dụ: v-model="hoten" => sẽ binding dữ liệu vào trong biến tên là `hoten`
                            -->
                            <input type="text" name="txtHoTen" id="txtHoTen" class="form-control" v-model="hoten"/>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label>Email</label>
                            <!-- 
                                Data Binding: là quá trình gắn giá trị người dùng nhập trong ô input vào 1 biến cụ thể trong VueJS
                                Sử dụng: v-model="tenbien"
                            -->
                            <input type="email" name="txtEmail" id="txtEmail" class="form-control" v-model="email" />
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label>Số điện thoại</label>
                            <!-- 
                                Data Binding: là quá trình gắn giá trị người dùng nhập trong ô input vào 1 biến cụ thể trong VueJS
                                Sử dụng: v-model="tenbien"
                            -->
                            <input type="text" name="txtSoDienThoai" id="txtSoDienThoai" class="form-control" v-model="sodienthoai" />
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <div class="form-group">
                            <label>Lời nhắn</label>
                            <!-- 
                                Data Binding: là quá trình gắn giá trị người dùng nhập trong ô input vào 1 biến cụ thể trong VueJS
                                Sử dụng: v-model="tenbien"
                            -->
                            <textarea name="txtLoiNhan" id="txtLoiNhan" class="form-control" v-model="loinhan"></textarea>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <button type="submit" class="btn btn-primary">Gởi lời nhắn</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Liên kết Jquery -->
    <script src="../../vendor/jquery/jquery.min.js"></script>

    <!-- Liên kết Bootstrap -->
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Liên kết VueJS -->
    <script src="../../vendor/vuejs/vue.js"></script>

    <!-- Code xử lý Trang web bằng VueJS -->
    <script src="../../assets/js/pages/contact.js"></script>
</body>

</html>

Step 3: code xử lý Trang liên hệ bằng VueJS

Để dễ dàng quản lý source code, chúng ta sẽ tạo file xứ lý Javascript tương ứng với từng trang chức năng.

Tạo file: assets/js/pages/contact.js

// Khởi tạo đối tượng (instance) Vue
var vue = new Vue({
    el: '#app',
    data: {
        // Tạo biến quản lý lỗi là mảng rỗng
        errors: [],

        // Tạo biến quản lý việc kiếm tra Ràng buộc dữ liệu (validation) hay chưa?
        // Mặc định là chưa kiểm tra
        dakiemtraloixong: false,

        // Khởi tạo giá trị ban đầu cho FORM
        hoten: '',
        email: '',
        sodienthoai: '',
        loinhan: ''
    },
    methods: {
        kiemTraDuLieu: function (e) {
            // Dừng sự kiện tiếp theo của FORM
            e.preventDefault();

            // Trước khi kiểm tra, cần reset lại biến lỗi
            // => Giả sử như chưa có lỗi xảy ra
            this.errors = [];
            this.dakiemtraloixong = false;

            // Validate Họ tên
            // Kiểm tra rỗng
            if (this.hoten == "") {
                this.errors.push('Vui lòng nhập Họ tên');
            } else if (this.hoten.length < 5) { // Kiểm tra độ dài
                this.errors.push('Vui lòng nhập Họ tên 5 ký tự trở lên');
            }

            // Validate Email
            // Kiểm tra rỗng
            if (this.email == "") {
                this.errors.push('Vui lòng nhập địa chỉ Email');
            } else if (this.email.length < 5) { // Kiểm tra độ dài
                this.errors.push('Vui lòng nhập địa chỉ Email 5 ký tự trở lên');
            } else if (!this.validateEmail(this.email)) { // Kiểm tra mẫu nhập EMAIL
                this.errors.push('Vui lòng nhập email đúng định dạng');
            }

            // Validate Số điện thoại
            // Kiểm tra rỗng
            if (this.sodienthoai == "") {
                this.errors.push('Vui lòng nhập số điện thoại');
            } else if (this.sodienthoai.length < 5) { // Kiểm tra độ dài
                this.errors.push('Vui lòng nhập số điện thoại 5 ký tự trở lên');
            }

            // Validate Lời nhắn
            // Kiểm tra rỗng
            if (this.loinhan == "") {
                this.errors.push('Vui lòng nhập lời nhắn');
            } else if (this.loinhan.length < 5) { // Kiểm tra độ dài
                this.errors.push('Vui lòng nhập lời nhắn 5 ký tự trở lên');
            }

            // Đã kiểm tra lỗi xong
            this.dakiemtraloixong = true;

            // Ví dụ demo, ngưng gởi dữ liệu SUBMIT đi
            // Always return false
            return false;
        },
        validateEmail: function (email) {
            if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
                return true;
            }
            return false;
        },
        hienThiThongBaoLoi: function() {
            // Nếu chưa vượt qua bước kiểm tra lỗi thì không được hiển thị thông báo
            if(this.dakiemtraloixong == false) {
                return false;
            }

            // Nếu có bất kỳ lỗi nào (mảng array lỗi không rỗng) => độ dài array > 0)
            // Có lỗi => được hiển thị thông báo lỗi
            if(this.errors.length > 0) {
                return true;
            } 

            // Nếu không có lỗi thì không được hiển thị thông báo lỗi
            return false;
        },
        hienThiThongBaoChaoMung: function() {
            // Nếu chưa vượt qua bước kiểm tra lỗi thì không được hiển thị thông báo
            if(this.dakiemtraloixong == false) {
                return false;
            }

            // Nếu không có bất kỳ lỗi nào (mảng array lỗi là rỗng) => độ dài array == 0)
            // Không có lỗi => được hiển thị thông báo chào mừng
            if(this.errors.length == 0) {
                return true;
            } 

            // Mặc định không hiển thị
            return false;
        }
    }
});

Về trang chủ Về Khóa học

Bài học trước Bài học tiếp theo

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

Bài học trước Bài học tiếp theo

Về trang chủ Về Khóa học

Vuexy

Files

Members

NỀN TẢNG

Chương trình học

Chương 12-Bài 5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap

Sử dụng VueJS và Bootstrap để tạo trang Liên hệ (contact) có các Ràng buộc kiểm tra dữ liệu như sau:

Yêu cầu

Thực hiện

Step 1: Tạo cấu trúc thư mục như sau:

Step 2: code trong file `pages/contact.html`

Step 3: code xử lý Trang liên hệ bằng VueJS

Mục lục

Chương trình học

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Vuexy

Files

Members

Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap

Chương trình học

Chương 12-Bài 5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap

Sử dụng VueJS và Bootstrap để tạo trang Liên hệ (contact) có các Ràng buộc kiểm tra dữ liệu như sau:

Yêu cầu

Thực hiện

Step 1: Tạo cấu trúc thư mục như sau:

Step 2: code trong file pages/contact.html

Step 3: code xử lý Trang liên hệ bằng VueJS

Mục lục

Chương trình học

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Step 2: code trong file `pages/contact.html`