AngularJS form validation function implementation method

This article mainly introduces the AngularJS form verification function in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

It is very important to be able to give real-time visual feedback based on what the user enters in the form. In the context of human-to-human communication, the feedback given by form validation is as important as obtaining correct input.

Form validation can not only provide useful feedback to users, but also protect our web applications from being damaged by malicious or incorrect input. We have to do our best to protect the backend on the web frontend.

AngularJS can combine the HTML5 form validation function with its own validation instructions, and it is very convenient. AngularJS provides many form validation instructions.

<form name="form" novalidate>
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address"/>
</form>

To use form validation, first make sure the form has a name attribute like the example above.

All input fields can be subject to basic validation, such as maximum and minimum length, etc. These capabilities are provided by new HTML5 form attributes.

If you want to block the browser's default validation behavior for the form, you can add the novalidate tag to the form element

1. Required fields required

Verify a certain form input Whether it has been filled in, just add the HTML5 required tag on the input field element:

Note: the required attribute applies to the following types: text, search, url, telephone, email, password, date pickers , number, checkbox, radio and file

<input type="text" required />

2. Minimum length ng-minleng="{number}"

Verify whether the text length entered in the form is greater than a certain minimum value, in the input field Use the AngularJS directive ng-minleng="{number}"

<input type="text" ng-minlength="5" />　

3. Maximum length ng-maxlength="{number}"

Verify whether the text length entered in the form is less than or equal to a certain Maximum value, use AngularJS directive ng-maxlength="{number}"

<input type="text" ng-maxlength="20" />

4. Pattern matching ng-pattern="/PATTERN/"

Use ng-pattern on the input field ="/PATTERN/" to ensure that the input matches the specified regular expression:

<input type="text" ng-pattern="[a-zA-Z]" />　　

5. Email

To verify whether the input content is an email, just change the type of input as follows Just set it to email:

<input type="email" name="email" ng-model="user.email" />

6. Number

Verify whether the input content is a number, and set the input type to number:

<input type="number" name="age" ng-model="user.age" />

7. URL

Verify whether the input content is a URL, set the input type to url:

<input type="url" name="homepage" ng-model="user.facebook_url" />

Control variables in the form

The attributes of the form can be in the $scope object, and we can access the $scope object, so JavaScript can indirectly access form properties in the DOM. With the help of these properties, we can make real-time (like everything else in AngularJS) responses to the form. These properties include the following. (Note that these properties can be accessed using the following format.)

formName.inputFieldName.property

■Unmodified form

This is a Boolean property used to determine Whether the user modified the form. If it has not been modified, the value is true, if it has been modified, the value is false

formName.inputFieldName.$pristine

■Modified form

As long as the user has modified the form, no matter Whether the input passes the verification, this value will return true

formName.inputFieldName.$dirty

■Legal form

This Boolean attribute is used to determine whether the content of the form is legitimate. If the current form content is legal, the value of the following attribute is true:

formName.inputFieldName.$valid

■ Illegal form

This Boolean attribute is used to determine Whether the content of the form is illegal. If the current form content is illegal, the value of the following attribute is true:

formName.inputFieldName.$invalid

■ Error

This is provided by AngularJS Another very useful property: the $error object. It contains all validations for the current form, as well as information on whether they are valid or not. Use the following syntax to access this property:

formName.inputfieldName.$error

$parsers

When the user interacts with the controller, and $setViewValue() in ngModelController When the method is called, the functions in the $parsers array will be called one by one in a pipeline. After the first $parse is called, the execution result will be passed to the second $parse, and so on

These functions can convert the input value, or set the legality of the form through the $setValidity() function .

Using the $parsers array is one of the ways to implement custom validation.

For example, if we want to ensure that the input value is between a certain two values, we can push a new function in the $parsers array, which will be called in the verification chain.

The value returned by each $parser will be passed to the next $parser. Return undefined when you do not want the data model to be updated.

html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>表单测试</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="angular.1.2.13.js"></script>
</head>
<body>
  <p ng-controller="TestController">
    <form name="testForm">
      <input type="number" name="inputs" ng-test ng-model="obj.number">
      <span ng-show="testForm.inputs.$error.test">good</span>
      <span ng-hide="testForm.inputs.$error.test">bad</span>
      <p>{{ testForm.inputs.$valid }}</p>
      <p>{{ testForm.inputs.$invalid }}</p>
      <p>{{ obj.number }}</p>
    </form>
  </p>
  <script type="text/javascript" src="test5app.js"></script>
</body>
</html>

javascript ( test5app.js )

angular.module('myApp', []).controller('TestController', function($scope) {
  $scope.obj = {
    number: 34
  }
}).directive('ngTest', function() {
  return {
    require: '?ngModel',
    restrict: 'AE',
    link: function($scope, iElm, iAttrs, ngModel) {
      if (!ngModel) return;
      ngModel.$parsers.push(function(viewValue) {
        var num = parseInt(viewValue);
        if (num >= 0 && num < 99) {
          ngModel.$setValidity('test', true);
          return viewValue
        } else {
          ngModel.$setValidity('test', false);
          return undefined
        }
      })
    }
  }
});

Related recommendations:

Introduction to the jquery.validate form validation plug-in

Detailed explanation of the form validation function implemented by AngularJS to gain focus and lose focus

Detailed example of jQuery completing form verification function

The above is the detailed content of AngularJS form validation function implementation method. For more information, please follow other related articles on the PHP Chinese website!