Cách sử dụng AngularJS Validation

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

Chương 10-Bài 7. Cách sử dụng AngularJS Validation

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

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

Lượt xem: 322

Xem định dạng IN

Tạo form đăng ký như sau:

Trong mẫu form đăng ký trên gồm có các trường:

Name: Tên người đăng ký, độ dài trong khoảng từ 2 đến 20, bắt buộc.
Age: Tuổi của người đăng ký, là số nguyên, bắt buộc.
Username: Tên dùng để đăng nhập, độ dài trong khoảng từ 6 đến 12, bắt buộc.
Password: Mật khẩu dùng để đăng nhập, bắt buộc.
Display password: Khi người dùng chọn Display Password thì password vừa nhập vào sẽ hiển thị plaintext.
Email: Email đăng ký, chỉ chấp nhận nhập vào địa chỉ gmail, bắt buộc.

Trong trường hợp người dùng chưa nhập đúng bất kỳ một form nào ở trên thì người dùng sẽ không thể Submit dữ liệu. Chúng ta sẽ lần lượt sử dụng các tính năng form validation vào mẫu đăng ký người dùng sau đây.

Input Tag Validation

AngularJS cung cấp nhiều thuộc tính validation của thẻ input giúp chúng ta kiểm tra:

Tính bắt buộc
Độ dài của chuỗi nhập vào
Định dạng của chuỗi nhập vào
Kiểu dữ liệu của input ...

<input
  ng-model="string"
  [name="string"]
  [required="string"]
  [ng-required="boolean"]
  [ng-minlength="number"]
  [ng-maxlength="number"]
  [ng-pattern="string"]
  [ng-change="string"]
  [ng-trim="boolean"]>
...
</input>

Code

<!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>Ví dụ validate form AngularJS</title>

    <!-- Include thư viện Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

    <!-- Include script angularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <style>
        .error {color: red;}
        .valid {color: blue;}
    </style>
</head>

<body>
    <div ng-app="validationApp" ng-controller="mainController">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <form name="userForm" ng-submit="submitForm()" novalidate>
                        <!-- Tên -->
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" name="name" class="form-control" ng-model="name" ng-minlength="2"
                                ng-maxlength="20" ng-required=true>

                            <span class="error" ng-show="userForm.name.$error.required">Vui lòng nhập tên</span>
                            <span class="error" ng-show="userForm.name.$error.minlength">Tên phải > 2 ký tự</span>
                            <span class="error" ng-show="userForm.name.$error.maxlength">Tên phải <= 20 ký tự</span>
                                    <span class="valid" ng-show="userForm.name.$valid">Hợp lệ</span>
                        </div>

                        <!-- Tuổi -->
                        <div class="form-group">
                            <label>Age</label>
                            <input type="number" name="age" class="form-control" ng-model="age" ng-required=true>
                            <span class="error" ng-show="userForm.age.$error.required">Vui lòng nhập tuổi</span>
                            <span class="error" ng-show="!userForm.age.$error.required && userForm.age.$invalid">Tuổi
                                phải là số</span>
                            <span class="valid" ng-show="userForm.age.$valid">Hợp lệ</span>
                        </div>

                        <!-- Tên đăng nhập -->
                        <div class="form-group">
                            <label>Username</label>
                            <input type="text" name="username" class="form-control" ng-model="username" ng-minlength="6"
                                ng-maxlength="12" ng-required=true>
                            <span class="error" ng-show="userForm.username.$error.required">Vui lòng nhập tên đăng nhập</span>
                            <span class="error" ng-show="userForm.username.$error.minlength">Tên đăng nhập phải > 6 ký
                                tự</span>
                            <span class="error" ng-show="userForm.username.$error.maxlength">Tên đăng nhập phải <= 12 6
                                    ký tự</span> <span class="valid" ng-show="userForm.username.$valid">Hợp lệ</span>
                        </div>

                        <!-- Mật khẩu -->
                        <div class="form-group">
                            <label>Password</label>
                            <input class="form-control" type="password" name="password" ng-show="!showPassword"
                                ng-model="password" ng-required=true>
                            <input class="form-control" type="text" name="plainPassword" ng-show="showPassword" ng-model="password"
                                ng-required=true>
                            <span class="error" ng-show="userForm.password.$error.required">Vui lòng nhập mật khẩu</span>
                            <span class="valid" ng-show="userForm.password.$valid">Hợp lệ</span>
                        </div>
                        <div class="form-group">
                            <input type="checkbox" id="showPassword" ng-model="showPassword">
                            <label class="comment" for="showPassword">
                                Hiển thị mật khẩu
                            </label>
                        </div>

                        <!-- Email -->
                        <div class="form-group">
                            <label>Email</label>
                            <input class="form-control" type="mail" name="mail" ng-model="mail" ng-pattern="/^.+@gmail.com$/"
                                ng-required=true>
                            <span class="error" ng-show="userForm.mail.$error.required">Vui lòng nhập email</span>
                            <span class="error" ng-show="!userForm.mail.$error.required&&userForm.mail.$error.pattern">Chỉ
                                chấp nhập GMAIL, vui lòng kiểm tra lại</span>
                            <span class="valid" ng-show="userInfo.mail.$valid">Hợp lệ</span>
                        </div>

                        <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Đăng ký</button>

                    </form>
                </div>

                <script>
                    // tạo angular app
                    var validationApp = angular.module('validationApp', []);

                    // tạo Controller
                    validationApp.controller('mainController', function ($scope) {

                        // hàm submit form sau khi đã kiểm tra các ràng buộc (validate)
                        $scope.submitForm = function () {

                            // kiểm tra các ràng buộc là hợp lệ
                            if ($scope.userForm.$valid) {
                                alert('Hợp lệ, dữ liệu đã được gởi đăng ký.');
                            }
                        };
                    });
                </script>
            </div>
        </div>
    </div>
</body>

</html>

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

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

Chương trình học

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 10-Bài 7. Cách sử dụng AngularJS Validation

Input Tag Validation

Code

Mục lục

Chương trình họ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

Cách sử dụng AngularJS Validation

Chương 10-Bài 7. Cách sử dụng AngularJS Validation

Input Tag Validation

Code

Mục lục

Chương trình họ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 ❤🧡💛💚💙💜