<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 })();