ANGULARJS Form Verification Intermediate (3) _angularjs

Directory

Basic validation
Verify plug-in messages
Custom validation

Basic validation

<form name= "form" Novalidate ng-app>
  <span>{{form. $invalid}}</span> <span>{{form
  . $valid}}</span>
  <span>{{form $dirty}}</span>
  <span>{{form. $pristine}}</span >
  <input type= "text" ng-model= "user" required/> <input type=
  "text" ng-model= "pwd" required Minlength= "4" ng-maxlength= "5"/>
  <input type= "text" ng-model= "phone" required ng-pattern= "/1[3|5|7|8|" [0-9] {9}/"/> <input type=" email "ng-model=" email "required/>" <input "
  url" type= "url" Required/>
  <input type= "number" ng-model= "number" required/>
  <div>
    <button type= " Reset "ng-disabled=" form $pristine "> Reset </button>
    <button type=" Submit "ng-disabled=" form. $invalid "> Submit </button>
  </div>
</form>

The above shows the basic NG validation.

Here is an introduction to the above special case:

novalidate: disable H5 self-tape validation

ng-maxlength: If you do not write ng,maxlength, you can directly restrict the maximum number of characters, slightly different (IE9 + Chrome test)

Ng-pattern: through regular validation, without the start of NG, there is no validation effect.

Note: To enable authentication, you need to bind a Ng-model

Accessing form Properties

---position form: <form name>.<angular property>

---Access an input box: <form name>.<input name>.<angular property>

Verifying Plug-ins

Before introducing the messages plug-in, let's look at the original validation hints

<form name= "form" Ng-app novalidate>
  <span>{{form.user. $error required? ' User must fill in ': '}}</span>
  <input type= "text" ng-model= "user" name= "user" required/> <span>{{
  Form.pwd. $error. Required? ' PWD This must be filled ': '}}</span>
  <input type= "text" ng-model= "pwd" name= "pwd" required/> <span>{{
  Form.info. $error. Required? ' Info This must be filled ': '}}</span>
  <input type= "text" ng-model= "info" name= "info" required/> <span>{{
  Form.age. $error. Required? ' Age this must be filled ': '}}</span>
  <input type= "text" ng-model= "Age" name= "age" required/>
  <div>
    <button type= "Submit" ng-disabled= "form. $invalid" > Submit </button>
  </div>
</form>

Here just judged the require when our code we repeatedly wrote a lot of 3-dollar expressions

The messages plugin is a more user-friendly solution to repetitive problems.

<form name= "form" ng-app= "myApp" novalidate> <input type= "
  Email" ng-model= "user" name= "username" Required minlength= "4"/>
  <div ng-messages= "form.username. $error" Ng-messages-multiple>
    <div Ng-message= "required" > Required </div>
    <div ng-message= "minlength" > below minimum length </div>
    <div ng-message= "Email" > should be email</div>
  </div>
</form>
<script src= "scripts/ Angular.min.js "></script>
<script src=" Scripts/angular-messages.min.js "></script>
<script>
  angular.module (' myApp ', [' ngmessages ']);
</script>

Nuget:install-package angularjs.messages

Custom validation

With basic verification, we have been able to solve most of the validation problems. But the project is always filled with a variety of needs.

Custom validation in Ng is typically created in the form of instructions.

<form name= "form" ng-app= "myApp" novalidate> <input type= "
  Email" ng-model= "user" name= "username" Required Ensure-unique minlength= "4"/>
  <div ng-messages= "form.username. $error" ng-messages-multiple>
    <div ng-message= "required" > This must be filled </div>
    <div ng-message= "minlength" > below minimum length </div>
    <div ng-message= "Email" > should be email</div>
    <div ng-message= "unique" > username already exists </div>
  </div>
</form>

In the Messages plug-in demo above, a new row verifies that the username already exists and that the Ensure-unique directive is added to the input

At the same time, we need to define Ensure-unique directives in JS:

Angular.module (' myApp ', [' ngmessages ']). Directive (' Ensureunique ', [' $http ', ' $timeout ', ' $window ', function ($http, $ Timeout, $window) {return {restrict: "A", Require: ' Ngmodel ', link:function (scope, Ele,
            Attrs, Ngmodelcontroller) {scope. $watch (Attrs.ngmodel, function (n) {if (!n) return;
            $timeout. Cancel ($window. timer); $window. Timer = $timeout (function () {$http ({method: ' Get ', url: '/api/che ckusername/',//According to your own URL params: {"username": n}}). su ccess (function (data) {Ngmodelcontroller. $setValidity (' unique ', data.isunique);//Depending on what you return, you are actually returning one of the correct fields, specific to this piece can be modified by their own project}. Error (function (data) {Ngmodelcontroller. $setValidity (' unique ', FA
              LSE);
            });
          }, 500);
        });
    }
      };
 }]);

Instruction is not the focus of this section, here is a simple

Ngmodelcontroller. $setValidity (' unique ', bool);

This API allows you to set up $error.unique.

Setvalidity is true, $error.unique is False

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.