表单验证
ng-minlength:最小长度
ng-maxlength:最大长度
ng-class:根据条件添加class
ng-submit:表单提交
ng-if:条件判断
该示例意义为：输入验证，当输入时不满足最少为4最多为10的字符时，自动给input添加error类，首次进入页面不生效，并验证是否合法
1 <body ng-app="myApp" ng-controller="MoinController"> 2 <form name="signUpForm" ng-submit="submitForm()"> 3 <div class="form-group"> 4 <label>用户名：</label> 5 <input 6 class="form-control" 7 name="username" 8 ng-model="username" 9 ng-minlength="4" 10 ng-maxlength="10" 11 ng-class="{'error':signUpForm.username.$invalid && signUpForm.username.$touched }" 12 required/> 13 <div ng-if="signUpForm.username.$invalid && 14 signUpForm.username.$touched"> 15 您的输入有误，请检查 16 </div> 17 <div ng-if="signUpForm.username.$valid"> 18 合法 19 </div> 20 </div> 21 </form> 22 </body>
1 angular.module('myApp',[]) 2 .controller('MoinController', function($scope) 3 { 4 $scope.submitForm = function() 5 { 6 7 } 8 })
这样在没有写js代码的情况下已经实际上实现了简单表单验证的效果