AngularJS之表单验证

表单验证

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代码的情况下已经实际上实现了简单表单验证的效果

posted @ 2016-08-02 17:48  前进中的蜗牛  阅读(236)  评论(0)  编辑  收藏  举报