AngularJS Form Verification intermediate (3), angularjs Form Verification

AngularJS Form Verification intermediate (3), angularjs Form Verification

Directory

Basic Verification
Verify the plug-in messages
Custom Verification

Basic Verification

<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 type =" url "ng-model =" 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 verification.

Here we will focus on the above special cases:

Novalidate:Disable built-in H5 Verification

Ng-maxlength:If ng is not written, maxlength is directly limited to the maximum number of input characters, slightly different (IE9 + Chrome test)

Ng-pattern:Regular Expression verification. If ng is not started, no verification result is displayed.

Note:To enable verification, you must bind an ng-model

Access Form attributes

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

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

Verify the plug-in

Before introducing the messages plug-in, let's take a look at the original verification prompt.

<Form name = "form" ng-app novalidate> <span >{{ form. user. $ error. required? 'User required ': ''}}</span> <input type =" text "ng-model =" user "name =" user "required/> <span >{{ form. pwd. $ error. required? 'Pwd required ': ''}}</span> <input type =" text "ng-model =" pwd "name =" pwd "required/> <span >{{ form.info. $ error. required? 'Info this item is required ': ''}}</span> <input type =" text "ng-model =" info "name =" info "required/> <span >{{ form. age. $ error. required? 'Age required ': ''}}</span> <input type =" text "ng-model =" age "name =" age "required/> <div> <button type =" submit" ng-disabled = "form. $ invalid "> submit </button> </div> </form>

Here we only judge require. When we repeat the code, we write a lot of 3-element expressions.

Messages plug-ins are more user-friendly to solve repeated 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"> it should be email </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 Verification

Through basic verification methods, we have been able to solve most of the verification problems, but the project is always filled with various requirements.

Custom authentication in ng is generally 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 "> required </div> <div ng-message =" minlength "> below minimum length </div> <div ng-message = "email"> it must be email </div> <div ng-message = "unique"> the user name already exists </div> </form>

In the preceding messages plug-in Demo, create a new line to verify that the user name already exists and add the ensure-unique command to the input.

At the same time, we need to define the ensure-unique command in js:

Angular. module ('myapp', ['ngmessages ']). directive ('enabreunique', ['$ 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/checkusername/', // replace it with your own url params: {"username": n }}). success (function (data) {ngModelController. $ setValidity ('unique', data. isUnique); // This depends on whether you return a correct field. You can modify this field according to your project }). error (function (data) {ngModelController. $ setValidity ('unique', false) ;}) ;}, 500) ;}}}]);

Commands are not the focus of this section.

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

You can set $ error. unique.

If setValidity is true, $ error. unique is false.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.