Chương 14-Bài 4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản

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

Ngày đăng: 22/2/2025, 12:28

Lượt xem: 156

Step 1: tạo giao diện và thu thập dữ liệu người dùng bằng `v-model`

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Đăng ký tài khoản</title>

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

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

<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Đăng ký tài khoản</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <form name="frmDangKy" id="frmDangKy" method="post" action="#">
                        <div class="form-group">
                            <label for="">Họ tên</label>
                            <input type="text" name="txtHoTen" id="txtHoTen" class="form-control" v-model="hoten" />
                        </div>
                        <div class="form-group">
                            <label for="">Số điện thoại</label>
                            <input type="text" name="txtSoDienThoai" id="txtSoDienThoai" class="form-control" v-model="sodienthoai" />
                        </div>
                        <div class="form-group">
                            <button type="submit" name="btnDangKy" id="btnDangKy" class="btn btn-primary">
                                <i class="fa fa-user-plus" aria-hidden="true"></i> Đăng ký
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-primary" role="alert">
                        Thông tin của bạn vừa nhập là: <b>{{ hoten }}</b> - <b>{{ sodienthoai }}</b>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Liên kết thư viện JQUERY -->
    <script src="vendor/jquery/jquery.min.js"></script>

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

    <!-- Liên kết VUEJS -->
    <script src="vendor/vuejs/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                hoten: '',
                sodienthoai: ''
            },
            methods: {

            }
        });
    </script>
</body>

</html>

Về trang chủ Về Chương trình học

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

Ủng hộ tác giả

Bình luận

Bình luận của bạn

Vui lòng đăng nhập để gởi bình luận!

Đăng nhập

Danh sách bình luận

Chưa có bình luận nào!

Chương 14-Bài 4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản

Step 1: tạo giao diện và thu thập dữ liệu người dùng bằng `v-model`

Ủng hộ tác giả

Bình luận

Mục lụ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 ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

CÁC CHÍNH SÁCH

Chương 14-Bài 4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản

Step 1: tạo giao diện và thu thập dữ liệu người dùng bằng v-model

Ủng hộ tác giả

Bình luận

Mục lụ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 ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

Step 1: tạo giao diện và thu thập dữ liệu người dùng bằng `v-model`