AngularJs form validation methods

Anjularjs Form Validation

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

To verify whether a form input has been filled in, just add the HTML5 tag required on the input field element:

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

<input>

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

To verify whether the text length entered in the form is greater than a certain minimum value, use the AngularJS directive ng-minleng="{number}"

# on the input field

##

<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 length value, use the AngularJS directive ng-maxlength="{number}"

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

on the input field 4. Pattern matching ng-pattern="/PATTERN/"

Use ng-pattern="/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 set the input type to email as follows:

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

　6. Numbers

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 properties of the form can be accessed in the $scope object to which they belong, and we can access the $scope object, so JavaScript can indirectly access the 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 format below.)

formName.inputFieldName.property

■Unmodified form

This is a Boolean property, Used to determine whether the user has 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, regardless of whether the input is After verification, the value will return true

formName.inputFieldName.$dirty

■Legal form

This Boolean attribute is used to determine whether the content of the form is legal. 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 the form Whether the content is illegal. If the current form content is illegal, the value of the following attribute is true:

formName.inputFieldName.$invalid

■ Error

This is another very useful feature provided by AngularJS Properties: $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 the ngModelController When the $setViewValue() 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 validity of the form through the $setValidity() function .

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

　　例如，假设我们想要确保输入值在某两个数值之间，可以在 $parsers 数组中入栈一个新的函数，这个函数会在验证链中被调用。

　　每个 $parser 返回的值都会被传入下一个 $parser 中。当不希望数据模型发生更新时返回undefined 。

 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(&#39;test&#39;, true);                    
                    return viewValue
                } else {
                    ngModel.$setValidity(&#39;test&#39;, false);                    
                    return undefined
                }
            })
        }
    }
});

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