angular+angular-toastr前端校验

<form form-verification class="form-horizontal" role="form">
     <div class="form-group">
       <label class="col-sm-3 control-label">学号:</label>
       <div class="col-sm-3">
         <input class="form-control"  warningval="学号必须为数字" errorval="学号不能为空" error-reg="nullValue" warning-reg="number"  verification id="focusedInput" type="text" value="">
       </div>
       <label class="col-sm-2 control-label">项目:</label>
       <div class="col-sm-3">
         <input class="form-control"  errorval="项目不能为空" error-reg="nullValue"  verification  id="focusedInput" type="text" value="">
       </div>
     </div>

     <div class="form-group">

       <button class="hos-but-success" form-submit submit="submit()">保存</button>
     </div>
    </form>

　调用校验无需再写js

form-verification时间校验表单指令

verification 单独表单校验指令

form-submit表单提交指令
警告时可以提交，错误提醒组织提交
运用于表单失去焦点校验，表单提交校验，在html写校验提醒内容我觉得比较方便，直接在行内些校验正则，通过toastr做校验提醒

  1 (function() {
  2   'use strict';
  3 
  4   angular
  5     .module('app')
  6     .directive('formVerification', formVerification)
  7     .directive('verification',['toastr','regularService',verification])
  8     .directive('formSubmit',['toastr','regularService',formSubmit]);
  9 
 10   function formVerification() {
 11     var directive = {
 12       restrict: 'A',
 13       scope: {
 14         verificationSubmit:"@",
 15       },
 16       controller: formVerification,
 17       link: function(scope,element,attr){
 18         //提交表单全局判断
 19         scope.submitData=function(){
 20              scope.submit=true
 21                      element.find("*").each(function(){
 22                       
 23                         $(this).blur()
 24                      })
 25                 return scope.submit;
 26             }
 27      }
 28     };
 29 
 30         return directive;
 31         function formVerification($scope) {
 32             $scope.submit=true
 33 
 34         return $scope
 35           
 36         }
 37       }
 38       function verification(toastr,regularService){
 39         var directive = {
 40           restrict: 'A',
 41           scope: {
 42             errorReg:"@",//错误提醒正则
 43             errorval:"@",//错误提醒内容
 44             warningval:"@",//警告提醒内容
 45             warningReg:"@",//警告提醒正则
 46           },
 47           controller: verification,
 48           require:"^formVerification",
 49           link: function(scope,element,attr,pCtrl){
 50             scope.pCtrl=pCtrl
 51             console.log(scope.errorReg)
 52             element.focus(function(event) {
 53                element.removeClass("inputWarning")
 54                 element.removeClass("inputError")
 55             });
 56             //失去焦点校验
 57             element.blur(function(){
 58                
 59                 if(scope.errorReg){
 60                    
 61                    var reg=regularService.reg[scope.errorReg];
 62                    if(scope.errorReg=='nullValue'){
 63                          if(reg.test(element.val())){
 64                           
 65                           console.log(toastr)
 66                           toastr.error(scope.errorval)
 67                           console.log(toastr)
 68                           element.addClass("inputError")
 69                           scope.pCtrl.submit=false
 70                           return 
 71                         }
 72                    }else{
 73                         if(!reg.test(element.val())){
 74                             
 75                             toastr.error(scope.errorval)
 76                             
 77                             
 78                             element.addClass("inputError")
 79                             scope.pCtrl.submit=false
 80                             return 
 81                         }
 82                    }
 83                
 84                 }
 85                 if(scope.warningReg){
 86                      
 87                      var reg=regularService.reg[scope.warningReg];
 88                      if(scope.warningReg=='nullValue'){
 89                          if(reg.test(element.val())){
 90                            
 91                             toastr.warning(scope.warningval)
 92                             
 93                           
 94                           element.addClass("inputWarning")
 95                           
 96                           return
 97                         }
 98                      }else{
 99                         if(!reg.test(element.val())){
100                             
101                             toastr.warning(scope.warningval)
102                             
103                             element.addClass("inputWarning")
104                         
105                            return
106                         }
107                      }
108                   
109                 }
110                 
111                 return 
112                 
113             });
114            }
115         };
116 
117         return directive;
118         function verification($scope,toastr) {
119            
120 
121             
122               
123         }
124 
125       }
126       function formSubmit(){
127         var directive = {
128           restrict: 'A',
129           scope:{
130             submit:"&",
131           },
132           controller:formSubmit,
133           require:"^formVerification",
134           link: function(scope,element,attr,pCtrl){
135             scope.pCtrl = pCtrl;
136             //提交表单校验
137             element.click(function(){
138                 if(scope.pCtrl.submitData()){
139                     scope.submit()
140                 }
141             })
142           }
143       }
144       return directive;
145       function formSubmit($scope,toastr) {
146          
147        
148             
149       }
150       }
151 
152     })();

View Code