Home > Developer > Web Develop
Angularjs forms and controls can validate data entered by the user.
Input validationIn the previous chapters you've learned about Angularjs forms and controls.
Angularjs forms and controls can provide data validation services and prompt information about illegal data.
| Please note that in no case can the client-side data be verified, and the data validation of the server is also required. |
<!DOCTYPE HTML><HTML><Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></Script><Body><H2>Validation Example</H2><formNg-app= "MYAPP"Ng-controller= "Validatectrl"name= "MyForm"novalidate><P>Username:<BR> <inputtype= "text"name= "User"Ng-model= "User"Required> <spanstyle= "Color:red"Ng-show= "Myform.user. $dirty && myform.user $invalid"> <spanNg-show= "Myform.user. $error. Required">Username is required.</span> </span></P><P>Email:<BR> <inputtype= "Email"name= "Email"Ng-model= "Email"Required> <spanstyle= "Color:red"Ng-show= "Myform.email. $dirty && myform.email $invalid"> <spanNg-show= "Myform.email. $error. Required">Email is required.</span> <spanNg-show= "Myform.email. $error. Email">Invalid email address.</span> </span></P><P> <inputtype= "Submit"ng-disabled= "Myform.user. $dirty && myform.user $invalid | | Myform.email. $dirty && myform.email. $invalid "></P></form><Script>varapp=Angular.module ('myApp', []); App.controller ('Validatectrl', function($scope) {$scope. User= 'John Doe'; $scope. Email= '[email protected]';});</Script></Body></HTML>
Run
| The novalidate property indicates that the default browser data validation feature is disabled. |
The ANGULARJS directive Ng-model binds the input tag to the model.
The model object has two properties:user and email.
By using the ng-show directive to show or hide the <span> element, the font of the element is set to red, which is displayed when user or email is $dirty and $invalid .
| Filter | FiltersDescription |
|---|---|
| $dirty | Indicates that the contents of the current field have been modified. |
| $valid | Indicates that the content in the current field is valid. |
| $invalid | Indicates that the content in the current field is not valid. |
| $pristine | Indicates that the contents of the current field have not been modified. |
Angularjs Quick Start Guide 14: Data 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
