Common form validation directives (basic concepts) 1. Mandatory fields Validation
If a form input is filled in, simply add the HTML5 tag to the input field element required:
<input type= "text" required/>
2. Minimum length
To verify that the text entered by the form is longer than a certain minimum value, use the directive ng-minleng= "{number}" on the input field:
3. Maximum length
To verify that the text length entered by the form is less than or equal to a maximum value, use the directive ng-maxlength= "{number}" on the input field:
<input type= "text" ng-maxlength= "/>"
4. Pattern matching
Use ng-pattern= "/pattern/" to ensure that the input matches the specified regular expression:
5. Email
Verify that the input is an e-mail message, as long as you set the type of input to email as follows:
6. Digital
Verify that the input is numeric and set the type of input to number:
7. URL
Verify that the input is a URL and set the type of input to a URL:
<input type= "url" name= "homepage" ng-model= "User.facebook_url"/>
We use the ng-show directive, color:red is displayed when the message is $dirty or $invalid :
Properties |
Description |
$dirty |
The form is filled with records |
$valid |
The contents of the field are valid |
$invalid |
The contents of the field are illegal |
$pristine |
form does not fill in records |
Example (using mailbox as an example + regular expression introducing Angular+bootstrap)
ng Regular expression notation:
Ng-pattern= "/^ ([a-za-z0-9_\.\-]) +\@ (([a-za-z0-9\-]) +\.) + ([a-za-z0-9]{2,4}) +$/" //Email verification
<BodyNg-controller= "Mycontroller">//ng-app label on HTML tags<Divclass= "Col-md-6"> <formrole= "form"name= "MyForm"Ng-submit= "SubmitForm (myForm. $valid)"class= "Form-horizontal"novalidate> <Divclass= "Form-group has-feedback"> <Divclass= "Col-md-4"> <label for= "Email">Email</label> </Div> <Divclass= "Col-md-6"> <inputtype= "Email"ID= "Email"name= "Email"Ng-minlength= "5"Ng-maxlength= "+"Ng-pattern= "/^ ([a-za-z0-9_\.\-]) +\@ (([a-za-z0-9\-]) +\.) + ([a-za-z0-9]{2,4}) +$/"Ng-model= "User.email"Required Class= "Form-control" /> <spanclass= "Glyphicon glyphicon-ok form-control-feedback"Ng-show= "Myform.email. $dirty && myform.email $valid"></span> </Div> <Divclass= "Col-md-2"> <spanstyle= "Color:red"class=""Ng-show= "Myform.email. $dirty && myform.email $invalid">Bad mailbox Format!</span> </Div> </Div> <Divclass= "Form-group text-center"> <inputclass= "btn btn-primary btn-lg"ng-disabled= "MyForm. $invalid"type= "Submit"value= "Submit" /> </Div> </form></Div><Script>Angular.module ('myTest', []). Controller ('Mycontroller', function($scope) {$scope. SubmitForm= function(isValid) {if (!isValid) {Alert ('validation Failed'); } }; } );</Script></Body>
You can also spend a single error in more detail:
<DivNg-show= "Myform.email. $dirty && myform.email. $error. MaxLength"class= "Alert Alert-danger help-block">mailbox length cannot exceed 30 bits</Div><DivNg-show= "Myform.email. $dirty && myform.email. $error. MinLength"class= "Alert Alert-danger help-block">mailbox length cannot be less than 5 bits</Div><DivNg-show= "Myform.email. $dirty && myform.email. $error. Email"class= "Alert Alert-danger help-block">The mailbox format is not correct</Div>
Get a thorough understanding of angularjs form Validation