Another form of ANGULARJS verification is automatic verification, that is, through the directive to achieve, in addition to ANGULARJS directive, also need to use angular-auto-validate this third-party module.
About Angular-auto-validate:
- Installation: NPM i angular-auto-validate
- Reference: <script src= ". /node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js "></script>
- Module dependencies: var myApp = Angular.module ("app", ["jcs-autovalidate"]);
In order to localize the error information, you also need to angular-localize this third party module:
- Installation: NPM Install angular-localize--save
- Module dependencies: var myApp = Angular.module ("app", ["Localize"]);
- Reference:
<script src= ". /node_modules/angular-sanitize/angular-sanitize.min.js "></script>
<script src=". /node_modules/angular-localize/angular-localize.min.js "></script>
In addition, when you click the Submit Form button, you need to disable the button and display a wait effect, which requires Angular-ladda this third party module:
- Installation: Bower Install Angular-ladda--save
- Module dependencies: var myApp = Angular.module ("app", ["Angular-ladda"]);
- Reference:
<link rel= "stylesheet" href= ". /bower_components/ladda/dist/ladda-themeless.min.css "/>
<script src=". /bower_components/ladda/dist/spin.min.js "></script>
<script src=". /bower_components/ladda/dist/ladda.min.js "></script>
<script src=". /bower_components/angular-ladda/dist/angular-ladda.min.js "></script>
The page is as follows:
First look at the submit button:
<div class= "Form-group" >
<!--<button class= "btn btn-primary" ng-click= "OnSubmit ()" >Register< /button>-->
<button class= "btn btn-primary" Ladda
= "Submitting" data-style= "Expand-right"
type= "Submit" >
<span ng-show= "Submitting" > is registering ...</span> <span ng-show=
"! Submitting "> Registration </span>
</button>
</div>
- Ladda property value is bool, true indicates dynamic wait effect, false does not show dynamic wait effect, here submitting is a property in scope
- Data-style= "Expand-right" indicates the dynamic wait effect on the right side of the button
Then take the age field in the form and say:
<div class= "Form-group" >
<label for= "age" class= "Control-label" >Age</label>
<input Type= "number"
class= "Form-control"
id= "age"
ng-model= "formmodel.age"
required= "required
" Min= "max="
ng-min-err-type= "Tooyoung" ng-max-err-type=
"Tooold"/> </div
>
Among them, Min, max for AGULARJS directive, and Ng-min-err-type is angular-auto-validate directive. The practice followed here is the directive name-err-type of Ng-angularjs form validation, and what is the role of Tooyoung and Tooold, and where is it used?
is used at the module level and is defined in the Form_validation_auto.js file.
var myApp1 = angular.module (' MyApp1 ', [' jcs-autovalidate ', ' localize ', ' Angular-ladda ']);
Myapp1.run (function (defaulterrormessageresolver) {
defaulterrormessageresolver.geterrormessages (). Then ( function (errormessages) {
errormessages[' tooyoung '] = ' age must be less than {0} ';
errormessages[' tooold ' = ' age cannot be greater than {0} ';
errormessages[' badusername ' = ' user name can only contain numbers, letters or underscores ';
}; Myapp1.controller (' MyCtrl1 ', function ($scope, $http) {
$scope. Formmodel = {};
$scope. submitting = false;
$scope. OnSubmit = function () {
$scope. submitting = true;
Console.log (' submitted ');
Console.log ($scope. Formmodel);
$http. Post (' URL ', $scope. Formmodel)
. Success (function (data) {
console.log (':) ');
$scope. submitting = false;
})
. Error (function (data) {
console.log (':(');
$scope. submitting = false;});
The above is the entire contents of this article, I hope that the Angularjs manual form verification can be skilled operation.