Form Verification (AngularJs), form verification angularjs

Form Verification (AngularJs), form verification angularjs

This time, I learned how to verify angularjs forms. angularjs provides the following status verification methods:

Status	Description
$ Invalid	Verification Failed
$ Valid	Verified
$ Pristine	Unrepaired
$ Dirty	Modify
$ Error	Error

 

In addition, AngularJS built-in validators:

Validators	Description
Required	Required
Ng-required	Mark the input field as required based on the Boolean condition of the Controller
Ng-minlength	Minimum Length
Ng-maxlength	Maximum length
Ng-pattern	Checks the specified regular expression mode.
Type = "email"	Email Verification
Type = "number"	Digit Verification
Type = "date"	If the browser supports this function, an HTML date selector is displayed. Otherwise, it is a text input by default.
Type = "url"	Verify URL text input

 

The following examples of Insus. NET are used for practice and description:

In the first case, the text box must be filled in. The minimum length and maximum length of the string are also required.

 

In the second case, it is a required field. type = number is used to limit the number of input characters.

 

In the third case, a field is required to verify the user input date.

In case 4, the field verifies that the email address format entered by the user is correct

 

In the fifth case, only numbers can be entered for the text box, and the value range is available. The minimum value is 7 and the maximum value is 109:

The sixth case is to verify that the user enters the URL Format String

In the seventh case, the pattern regular is used to verify the data entered by the user. The following example shows that only uppercase and lowercase letters can be entered.

 

Real-time operation Demonstration:

 

 

 

<Form name = "form1" ng-app = "CustomValidationApp" ng-controller = "cvController" novalidate> <p> <label> Item </label> <input type = "text "name =" Text "ng-model =" Text "required ng-minlength = 4 ng-maxlength = 13/> <div class =" error "ng-show =" form1.Text. $ dirty & form1.Text. $ invalid "> <small class =" error "ng-show =" form1.Text. $ error. required "> Text request value. </Small> <small class = "error" ng-show = "form1.Text. $ error. minlength"> the minimum length of Text is 4 characters. </Small> <small class = "error" ng-show = "form1.Text. $ error. maxlength"> the maximum length of Text is 13 characters. </Small> </div> </p> <label> Number </label> <input type = "number" name = "Number" ng-model =" number "required/> <div class =" error "ng-show =" form1.Number. $ dirty & form1.Number. $ invalid "> <small class =" error "ng-show =" form1.Number. $ error. required "> Number request value. </Small> <small class = "error" ng-show = "form1.Number. $ error. number"> Number must be a number. </Small> </div> </p> <label> Date </label> <input type = "date" name = "Date" ng-model =" date "required placeholder =" yyyy-MM-dd "/> <div class =" error "ng-show =" form1.Date. $ dirty & form1.Date. $ invalid "> <small class =" error "ng-show =" form1.Date. $ error. required "> Date request value. </Small> <small class = "error" ng-show = "form1.Date. $ error. date"> Date must be a date. </Small> </div> </p> <label> Email </label> <input type = "email" name = "email" ng-model =" email "required/> <div class =" error "ng-show =" form1.email. $ dirty & form1.email. $ invalid "> <small class =" error "ng-show =" form1.email. $ error. required "> email request value. </Small> <small class = "error" ng-show = "form1.email. $ error. email"> email must be the email address. </Small> </div> </p> <label> Range </label> <input type = "number" name = "Range" ng-model =" range "min =" 7 "max =" 109 "required/> <div class =" error "ng-show =" form1.Range. $ dirty & form1.Range. $ invalid "> <small class =" error "ng-show =" form1.Range. $ error. required "> Range request value. </Small> <small class = "error" ng-show = "form1.Range. $ error. number"> Range must be a number. </Small> <small class = "error" ng-show = "form1.Range. $ error. min"> the minimum value of Range is 7. </Small> <small class = "error" ng-show = "form1.Range. $ error. max"> the maximum value of Range is 109. </Small> </div> </p> <label> url </label> <input type = "url" name = "url" ng-model =" url "required/> <div class =" error "ng-show =" form1.url. $ dirty & form1.url. $ invalid "> <small class =" error "ng-show =" form1.url. $ error. required "> url request value. </Small> <small class = "error" ng-show = "form1.url. $ error. url"> the url must be in url format. </Small> </div> </p> <label> pattern </label> <input type = "text" name = "pattern" ng-model =" pattern "ng-pattern ="/^ [a-zA-Z] * $/"required/> <div class =" error "ng-show =" form1.pattern. $ dirty & form1.pattern. $ invalid "> <small class =" error "ng-show =" form1.pattern. $ error. required "> pattern request value. </Small> <small class = "error" ng-show = "form1.pattern. $ error. pattern"> pattern must be case-sensitive. </Small> </div> </p> </form>Html Source Code

 

Var cvApp = angular. module ('customvalidationapp', []); cvApp. controller ('cvcontroller', function ($ scope, $ http ){});JS Code