Angularjs Automatic form Verification _angularjs

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.