Get a thorough understanding of angularjs form Validation

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