angularJs 表单验证指令

AngularJS 前端验证指令

Java代码  

1. var rcSubmitDirective = {  
2.   'rcSubmit': function ($parse) {  
3.     return {  
4.       restrict: "A",  
5.       require: [ "rcSubmit", "?form" ],  
6.       controller: function() {  
7.         this.attempted = false;  
8.         var formController = null;  
9.         this.setAttempted = function() {  
10.           this.attempted = true;  
11.         };  
12.         this.setFormController = function(controller) {  
13.           formController = controller;  
14.         };  
15.         this.needsAttention = function(fieldModelController) {  
16.           if (!formController) return false;  
17.           if (fieldModelController) {  
18.             return fieldModelController.$invalid && (fieldModelController.$dirty || this.attempted);  
19.           } else {  
20.             return formController && formController.$invalid && (formController.$dirty || this.attempted);  
21.           }  
22.         };  
23.       },  
24.       compile: function() {  
25.         return {  
26.           pre: function(scope, formElement, attributes, controllers) {  
27.             var submitController = controllers[0];  
28.             var formController = controllers.length > 1 ? controllers[1] : null;  
29.             submitController.setFormController(formController);  
30.             scope.rc = scope.rc || {};  
31.             scope.rc[attributes.name] = submitController;  
32.           },  
33.           post: function(scope, formElement, attributes, controllers) {  
34.             var submitController = controllers[0];  
35.             var formController = controllers.length > 1 ? controllers[1] : null;  
36.             var fn = $parse(attributes.rcSubmit);  
37.             formElement.bind("submit", function(event) {  
38.               submitController.setAttempted();  
39.               if (!scope.$$phase) scope.$apply();  
40.               if (!formController.$valid) return;  
41.               scope.$apply(function() {  
42.                 fn(scope, {  
43.                   $event: event  
44.                 });  
45.               });  
46.             });  
47.           }  
48.         };  
49.       }  
50.     };  
51.   }  
52. };  

 验证通过

Java代码  

1. <form name="loginForm" novalidate  
2.       ng-app="LoginApp" ng-controller="LoginController" rc-submit="login()">  
3.     <div class="form-group"  
4.          ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}">  
5.         <input class="form-control" name="username" type="text"  
6.                placeholder="Username" required ng-model="session.username" />  
7.        <span class="help-block"  
8.              ng-show="rc.form.needsAttention(loginForm.username) &amp;&amp; loginForm.username.$error.required">Required</span>  
9.     </div>  
10.     <div class="form-group"  
11.          ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}">  
12.         <input class="form-control" name="password" type="password"  
13.                placeholder="Password" required ng-model="session.password" />  
14.        <span class="help-block"  
15.              ng-show="rc.form.needsAttention(loginForm.password) &amp;&amp; loginForm.password.$error.required">Required</span>  
16.     </div>  
17.     <div class="form-group">  
18.         <button type="submit" class="btn btn-primary pull-right"  
19.                 value="Login" title="Login">  
20.             <span>Login</span>  
21.         </button>  
22.     </div>  
23. </form>  

样式如下

 前端验证通过会调用login()