Главная » Изучение

Как проверить данные в AngularJS?

Angular Изучение
На чтение 43 мин Просмотров 196 Опубликовано

В этой статье мы узнаем, как проверять данные в Angular JS, а также понимаем различные способы проверки данных на примерах.

AngularJS позволяет проверять форму на стороне клиента. Проверка формы необходима, поскольку она гарантирует, что данные в форме верны, полны и введены в правильном порядке перед отправкой формы и отправкой сведений на сервер. Чтобы проверить данные, нам нужно проверить как форму, так и поля ввода и соответствующим образом уведомить пользователя о текущем состоянии. Если пользователь вводит данные в неправильном формате, он должен быть уведомлен об этом вместо предоставления неправильных данных.

Например, если пользователя просят ввести номер телефона, а пользователь вводит «abcde», пользователя следует попросить ввести номер телефона еще раз, и он должен быть уведомлен о том, что в этом поле разрешены только цифры. Выполняя проверку формы на стороне клиента, мы гарантируем, что правильные и полные данные отправляются на сервер.

Есть несколько элементов управления вводом, которые можно использовать в форме AngularJS, которые приведены ниже:

  • input: он используется для получения входных данных из формы в различных типах, таких как текст, пароль, электронная почта и т. д., путем изменения его типа.
<input type="text" name="name">
  • select: используется для создания выпадающего списка.
<select> 
 <option>1</option> 
 <option>2</option>
</select>
  • button: определяет нажимаемую кнопку для управления другими элементами или выполнения функций.
<button name="submit">Submit</button>
  • textarea: используется для ввода длинного текстового содержимого.
<textarea name="teaxtarea"></textarea>

AngularJS включает следующие директивы проверки:

  • ng-required: его можно использовать для помещения обязательного атрибута в поле ввода,
  • ng-minlength: его можно использовать для размещения атрибута минимальной длины в поле ввода,
  • ng-maxlength: его можно использовать для размещения атрибута максимальной длины в поле ввода,
  • ng-pattern: его можно использовать для размещения ключа ошибки проверки шаблона, если значение ngModel не соответствует выражению RegEx.
Читайте также:  Как изучить Adobe After Effects

Пример 1. В этом примере описывается проверка формы с использованием директив проверки.

  • HTML
<!DOCTYPE html>
<html>
 
<head>
    <title>Data Validation in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
 
<body ng-app="">
    <h1>Contact Us</h1>
    <form name="formname">
        <label>Name:</label>
        <input type="text"
               ng-model="name"
               name="name"
               ng-minlength=3
               ng-required="true"
               ng-pattern="/^[\w\s]*$/"> 
        <span ng-show="formname.name.$error.minlength"
              style="color:red">
            Minimum 3 characters required.
        </span> 
        <span ng-show="formname.name.$error.pattern"
              style="color:red">Name can have only alphabets.
        </span>
        <br>
        <label>Phone:</label>
        <input type="tel"
               name="phone"
               ng-model="phone"
               ng-pattern="/^[0-9]*$/"
               ng-required="true"
               ng-minlength=6
               ng-maxlength=20> 
        <span ng-show="formname.phone.$error.pattern"
              style="color:red">Phone number can have only digits.
        </span> 
        <span ng-show="formname.phone.$error.minlength"
              style="color:red">Minimum 6 characters required.
        </span>
        <span ng-show="formname.phone.$error.maxlength"
              style="color:red">Minimum 10 characters required.
        </span>
        <br>
        <label>Email:</label>
        <input type="email"
               name="email"
               ng-model="email"
               ng-required="true"
               ng-pattern=
"/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/">
            <span ng-show="formname.email.$error.pattern"
                  style="color:red">Email has to be in format abc@gmail.com.
        </span>
        <br>
        <label>Message:</label>
        <br>
        <textarea name="message"
                  ng-model="message"
                  ng-required="true"
                  ng-maxlength=100></textarea> 
            <span ng-show="formname.message.$error.maxlength"
                  style="color:red">Maximum length of message is 100 characters.
            </span>
    </form>
</body>
</html>

Выход:

Читайте также:  Введение в Spectre CSS

ере описывается проверка формы с исполь

Пример1

Объяснение: В приведенном выше примере мы создали форму обратной связи. Имя формы — «имя формы». В форме четыре поля: имя, телефон, электронная почта и сообщение. Мы использовали директивы проверки для проверки данных, введенных пользователем.

Для имени мы использовали директиву ng-required, которая означает, что вводить имя обязательно, ng-pattern, который имеет регулярное выражение для разрешения только букв и пробелов в имени, ng-minlength для обеспечения того, чтобы имя имело по крайней мере 3 символа, ng-maxlength для максимального количества символов, разрешенных в имени. Мы использовали директиву ng-show для соответствующего отображения сообщений. Директива ng-show отображает сообщение, если условие истинно. Например, если пользователь вводит имя, которое не соответствует регулярному выражению, указанному в шаблоне ngдиректива formname.name.$error.pattern» будет истинной, поэтому «ng-show=formname.name.$error.pattern» выведет сообщение «Имя может содержать только буквы». Здесь мы использовали объект $error, который содержит атрибуты проверки, применяемые к элементу. Аналогично прошли проверку все остальные поля: телефон, электронная почта, сообщение.

Есть 2 способа проверки данных в AngularJS. Первый метод заключается в использовании состояний контроля проверки, которые включают состояние формы и состояние ввода. Другой метод использует классы CSS.

Состояние формы и состояние ввода: состояние формы и полей ввода обновляются AngularJS, и эти состояния используются для отображения полезных сообщений пользователю.

Поля ввода имеют следующие состояния:

  • $untouched: поле еще не тронуто
  • $touched: поле было затронуто
  • $pristine: поле не было изменено
  • $dirty: поле было изменено
  • $valid: содержимое поля действительно
  • $invalid: содержимое поля недействительно

Формы имеют следующие состояния:

  • $pristine: поля еще не изменены
  • $dirty: одно или несколько полей были изменены
  • $invalid: содержимое формы недопустимо.
  • $valid: содержимое формы действительно
  • $submitted: форма отправлена

Эти свойства могут быть как истинными, так и ложными.

Пример 2. В этом примере описывается проверка формы с использованием состояний формы и полей.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Data Validation in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
 
<body ng-app="">
    <h1>Contact Us</h1>
    <form name="formname">
        <label>Name:</label>
        <input type="text"
               ng-model="name"
               name="name"
               ng-required="true"
               ng-pattern="/^[\w\s]*$/">
         <span ng-show=
"formname.name.$touched && formname.name.$error.required "
               style="color:red">
             Name is required and can have only alphabets.
         </span>
        <br>
        <label>Phone:</label>
        <input type="tel"
               name="phone"
               ng-model="phone"
               ng-pattern="/^[0-9]*$/"
               ng-required="true"> 
            <span ng-show=
"formname.phone.$invalid && formname.phone.$touched"
                  style="color:red">
                Phone number is required and can have only digits.
            </span>
        <br>
        <label>Email:</label>
        <input type="email"
               name="email"
               ng-model="email"
               ng-required="true"
               ng-pattern=
"/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"> 
            <span ng-show=
"formname.email.$invalid && formname.email.$touched"
                  style="color:red">
                Email has to be in format abc@gmail.com.
            </span>
        <br>
        <label>Message:</label>
        <textarea name="message"
                  ng-model="message"
                  ng-required="true"
                  ng-maxlength=100>
        </textarea> 
            <span ng-show=
"formname.message.$invalid && formname.message.$touched"
                  style="color:red">
Message is required, maximum length of message can be 100 characters.
            </span>
        <br>
        <input type="submit"
               name="submit"
               ng-disabled="formname.$invalid"> 
    </form>
</body>
</html>

Выход:

примере описывается проверка формы с и

Объяснение: В приведенном выше примере мы использовали состояния полей для проверки. Для имени мы использовали ng-show = «formname.name.$touched && formname.name.$error.required», что означает, что если поле было затронуто, но поле все еще пусто, сообщение «Имя требуется и может иметь только алфавиты».

Для номера телефона мы использовали ng-show = «formname.phone.$invalid && formname.phone.$touched», что означает, что если поле коснулось и все, что введено пользователем, недействительно, то печатается требуемое сообщение. Точно так же мы проверили поля электронной почты и сообщений.

Мы отключили кнопку, если условие «formname.$invalid» истинно, что означает, что если какое-либо поле в форме содержит недопустимые данные, кнопка не будет активирована. Если данные, введенные во все поля, верны, кнопка будет активирована.

Классы CSS для проверки формы: чтобы разрешить стилизацию формы и элементов управления, ng-model добавляет классы CSS.

Следующие классы добавляются или удаляются из поля ввода:

  • ng-untouched: поле еще не было затронуто
  • ng-touched: поле было затронуто
  • ng-pristine: поле не было изменено
  • ng-dirty: поле было изменено
  • ng-valid: содержимое поля действительно
  • ng-invalid: содержимое поля недействительно

Следующие классы добавляются в формы или удаляются из них:

  • ng-pristine: ни одно поле еще не было изменено
  • ng-dirty: одно или несколько полей были изменены
  • ng-valid: содержимое формы действительно
  • ng-invalid: содержимое формы недействительно

Пример 3. В этом примере мы добавляем стиль к форме и полям с помощью классов CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Data Validation in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <style>
        input.ng-invalid,
        textarea.ng-invalid {
            background-color: red;
        }
         
        input.ng-untouched,
        textarea.ng-untouched input.ng-pristine,
        textarea.ng-pristine {
            background-color: pink;
        }
         
        input.ng-touched,
        textarea.ng-touched {
            background-color: red;
        }
         
        input.ng-valid,
        textarea.ng-valid {
            background-color: green;
        }
         
        form {
            padding: 40px;
        }
         
        form.ng-invalid {
            background-color: #ed98a5;
        }
         
        form.ng-valid {
            background-color: #98edaf;
        }
    </style>
</head>
 
<body ng-app="">
    <h1>Contact Us</h1>
    <form name="formname">
        <label>Name:</label>
        <input type="text"
               ng-model="name"
               name="name"
               ng-minlength=3
               ng-required="true"
               ng-pattern="/^[\w\s]*$/">
            <span ng-show=
"formname.name.$error.minlength"
                  style="color:red">
               Minimum 3 characters required.
            </span>
            <span ng-show=
"formname.name.$error.pattern"
                  style="color:red">
               Name can have only alphabets.
            </span>
        <br>
        <label>Phone:</label>
        <input type="tel"
               name="phone"
               ng-model="phone"
               ng-pattern="/^[0-9]*$/"
               ng-required="true"
               ng-minlength=6
               ng-maxlength=20> 
            <span ng-show=
"formname.phone.$error.pattern"
                  style="color:red">
                Phone number can have only digits.
            </span> 
            <span ng-show=
"formname.phone.$error.minlength"
                  style="color:red">
                Minimum 6 characters required.
           </span>
           <span ng-show=
"formname.phone.$error.maxlength"
                 style="color:red">
                Minimum 10 characters required.
           </span>
        <br>
        <label>Email:</label>
        <input type="email"
               name="email"
               ng-model="email"
               ng-required="true"
               ng-pattern=
"/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"> 
            <span ng-show=
"formname.email.$error.pattern"
                  style="color:red">
                Email has to be in format abc@gmail.com.
            </span>
        <br>
        <label>Message:</label>
        <br>
        <textarea name="message"
                  ng-model="message"
                  ng-required="true"
                  ng-maxlength=100>
        </textarea> 
            <span ng-show=
"formname.message.$error.maxlength"
                  style="color:red">
                Maximum length of message is 100 characters.
            </span> 
    </form>
</body>
</html>

Выход:

примере мы добавляем стиль к форме и полям с помо

Объяснение: В приведенном выше примере мы использовали классы CSS, чтобы добавить стиль к элементам управления вводом и форме. Изначально цвет формы красный. Для полей ввода, если пользователь вводит недопустимые данные, цвет элемента управления вводом изменится на красный. Если пользователь не трогал или не модифицировал поле, его цвет останется розовым. Если пользователь коснулся поля, но ничего не ввел, его цвет меняется на красный. Если пользователь вводит достоверные данные, его цвет меняется на зеленый. Когда все поля содержат достоверные данные, цвет формы меняется на зеленый.

Пример 4: В этом примере мы создаем регистрационную форму, указав различные проверки.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Data Validation in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
  <style>
        input.ng-dirty {
            background-color: lightblue;
        }
         
        input.ng-valid {
            background-color: lightgreen;
        }
         
        span,
        p {
            color: red;
        }
         
        table {
            border-collapse: collapse;
            margin-bottom: 20px;
            margin-top: 10px;
        }
         
        tr,
        td,
        th {
            border: 1px solid black;
        }
    </style>
</head>
 
<body ng-app="myApp"
      ng-controller="myctrl">
    <h1>Registration Form</h1>
    <form name="formname">
        <label>First Name:</label>
        <input type="text"
               ng-model="firstname"
               name="firstname"
               ng-minlength=3
               ng-required="true"
               ng-pattern="/^[\w\s]*$/">
            <span ng-show=
"formname.firstname.$touched && formname.firstname.$error.required">
                Name is required.
            </span> 
            <span ng-show=
"formname.firstname.$error.minlength">
                Minimum 3 characters required.
            </span>
            <span ng-show=
"formname.firstname.$error.pattern">
                Name can have only alphabets.
            </span>
        <br>
        <label>Last Name</label>
        <input type="text"
               ng-model="lastname"
               name="lastname"
               ng-minlength=3
               ng-required="true"
               ng-pattern="/^[\w\s]*$/"> 
            <span ng-show=
"formname.lastname.$touched && formname.lastname.$error.required">
                Name is required.
            </span> 
            <span ng-show=
"formname.lastname.$error.minlength">
                Minimum 3 characters required.
            </span> 
            <span ng-show=
"formname.lastname.$error.pattern">
                Name can have only alphabets.
            </span>
        <br>
        <label>Gender:</label>
        <br>
        <input type="radio"
               name="gender"
               ng-model="gender"
               value="Male"
               ng-required="true">
        <label>Male</label>
        <input type="radio"
               name="gender"
               ng-model="gender"
               value="Female"
               ng-required="true">
        <label>Female</label>
        <br>
        <label>Password</label>
        <input type="password"
               name="password"
               ng-model="password"
               ng-required="true"
               ng-minlength=6
               ng-maxlength=10> 
            <span ng-show=
"formname.password.$touched && formname.password.$error.required">
                Password is required.
            </span>
            <span ng-show=
"formname.password.$error.minlength">
                Minimum 6 characters required.
            </span> 
            <span ng-show=
"formname.password.$error.maxlength">
                Minimum 10 characters required.
            </span>
        <br>
        <label>Phone</label>
        <input type="tel"
               name="phone"
               ng-model="phone"
               ng-pattern="/^[0-9]*$/"
               ng-required="true"
               ng-minlength=6
               ng-maxlength=10>
            <span ng-show=
"formname.phone.$touched && formname.phone.$error.required">
                Phone is required.
            </span> 
            <span ng-show="formname.phone.$error.minlength">
                Minimum 6 characters required.
            </span> 
            <span ng-show=
"formname.phone.$error.pattern">
                Phone number can have only digits.
            </span> 
            <span ng-show=
"formname.phone.$error.maxlength">
                Minimum 10 characters required.
            </span>
        <br>
        <label>Email:</label>
        <input type="email"
               name="email"
               ng-model="email"
               ng-required="true"
               ng-pattern="/^[a-z0-9/_$#%]+@[a-z]+[.]+[a-z]+$/"> 
            <span ng-show=
"formname.email.$touched && formname.email.$error.required">
                Email is required.
            </span> 
            <span ng-show=
"formname.email.$error.pattern">
                Email has to be in format abc@gmail.com.
            </span>
        <br>
        <select ng-model="city"
                name="city"
                ng-required="true">
            <option disabled="">Select city</option>
            <option ng-repeat="x in citylist">{{x}}</option>
        </select>
        <span ng-show=
"formname.city.$error.required">
            Select a city
        </span>
        <br>
        <label>Select technologies</label>
        <br>
        <input type="checkbox"
               name="option1"
               ng-model="checkboxvalue1"
               value="HTML">
        <label>HTML</label>
        <br>
        <input type="checkbox"
               name="option2"
               ng-model="checkboxvalue2"
               value="CSS">
        <label>CSS</label>
        <br>
        <input type="checkbox"
               name="option3"
               ng-model="checkboxvalue3"
               value="JavaScript">
        <label>JavaScript</label>
        <br>
        <input type="checkbox"
               name="option4"
               ng-model="checkboxvalue4"
               value="PHP">
        <label>PHP</label>
        <br>
        <p ng-if=
'!checkboxvalue1 && !checkboxvalue2 && !checkboxvalue3 && !checkboxvalue4'>
                Select a technology
        </p>
 
        <input type="submit"
               name="submit"
               ng-click="calculate()"
               ng-disabled="formname.$invalid">
    </form>
    <br>
    <table>
        <tr ng-repeat="x in list"
            ng-show="value!=0">
            <td>{{x.key}}</td>
            <td>{{x.value}}</td>
        </tr>
    </table>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myctrl', function($scope) {
            $scope.value = 0;
            $scope.firstname = '';
            $scope.city = "Select city";
            $scope.citylist = ["Mumbai", "Jaipur", "Pune"];
            $scope.calculate = function() {
                $scope.value += 1;
                $scope.list1 = [];
                if($scope.checkboxvalue1) 
                    $scope.list1.push(formname.option1.value);
                if($scope.checkboxvalue2) 
                    $scope.list1.push(formname.option2.value);
                if($scope.checkboxvalue3) 
                    $scope.list1.push(formname.option3.value);
                if($scope.checkboxvalue4) 
                    $scope.list1.push(formname.option4.value);
                $scope.list2 = $scope.list1.toString();
                $scope.list = [{
                    "key": "First name",
                    "value": $scope.firstname
                }, {
                    "key": "last name",
                    "value": $scope.lastname
                }, {
                    "key": "Gender",
                    "value": $scope.gender
                }, {
                    "key": "Phone",
                    "value": $scope.phone
                }, {
                    "key": "Email",
                    "value": $scope.email
                }, {
                    "key": "City",
                    "value": $scope.city
                }, {
                    "key": "Selected Technologies",
                    "value": $scope.list2
                }];
            }
        });
    </script>
</body>
</html>

Выход:

примере мы создаем регистрационную форму, указав ра

Оцените статью
bestprogrammer.ru
Добавить комментарий

© 2024 bestprogrammer.ru
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.