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.
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 followingtypes: text, search, url, telephone, email, password, date pickers , number, checkbox, radio and file
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}"
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}"
4. Pattern matching ng-pattern="/PATTERN/"
Use ng-pattern on the input field ="/PATTERN/" to ensure that the input matches the specified regular expression:
5. Email
To verify whether the input content is an email, just change the type of input as follows Just set it to email:
6. Number
Verify whether the input content is a number, and set the input type to number:
7. URL
Verify whether the input content is a URL, set the input type to 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
表单测试
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 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!