Home > Developer > Web Develop
Form verification is used in many places, before learning angular, I think form validation is a very troublesome thing, need to write a lot of code in JS, but in angular, only need to write very little code to complete the previous needs a lot of code to complete things.
In angular, when we add ng-model to the input tag, angular automatically generates a series of classes for the tag. For example:
<!DOCTYPE HTML><HTMLNg-app= "MYAPP"><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <Scriptsrc= "Js/angular.min.js"></Script> <Script>Angular.module ("myApp", []). Controller ("Confirmation",function($scope) {}); </Script></Head><Body> <formNg-controller= "Confirmation"> <inputtype= "text"Ng-model= "username" /> </form></Body></HTML>
And then, when the page loads, we'll review the elements.
It is obvious that this tag has more than two class names: Ng-pristine,ng-valid.
So what is the use of these two class names, the first ng-pristine is used to listen to the label is the original label, meaning that the input box has not entered a value, when the input of any value, the class name will become Ng-dirty, and then, We verify that the table is actually the second one: Ng-valid This is the class name provided by angular for form validation, ng-valid means that through validation, ng-invalid indicates that it does not pass. Let's take a look at the following piece of code, or just that, just add the validation criteria to input:
<ng-controller= "Confirmation"> < Type= "text" ng-model= "username" required ng-pattern= "/^\w{ 6,20}$/"/></form>Where required is provided by HTML5 that the input box cannot be empty, Ng-pattern is used to write regular expressions, and then we look at the results of the review element
You can see two more ng-invalid-required and Ng-valid-pattern in the class name.
I believe it's clear that these two class names work, a validation of the required validation of the input box, and a verification of the form's expression.
where ng-valid-and ng-invalid-? respectively, the verification and failure of the pass, and then Ng-valid represents all the validation through this input box, ng-invalid indicates that not all passed.
With this in mind, form validation is straightforward, such as when we want to give the user a hint behind the input box when the validation is passed:
<!DOCTYPE HTML><HTMLNg-app= "MYAPP"><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <Scriptsrc= "Js/angular.min.js"></Script> <Script>Angular.module ("myApp", []). Controller ("Confirmation",function($scope) {}); </Script> <style>span{Display:None; }. Ng-valid+span{Display:inline;Color:Green; } </style></Head><Body> <formNg-controller= "Confirmation"> <inputtype= "text"Ng-model= "username"Required Ng-pattern= "/^\w{6,20}$/"/> <span>Validation by</span> </form></Body></HTML>
If there are errors or deficiencies, also hope that the great God guidance.
Angularjs easily handle form validation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
