1, events:
(1) the onfocus (direct - display state);
(2) onChange (gradually test, according to the test results - display state);
(. 3) the onblur (gradually test, according to the test results - display state)
2, state function definition
(1) initialization state
(2) parameters, the process according to the state of the abnormal condition
(3) use state
3, the test function definitions
(1) test is empty, empty state function execution, execution is stopped down
(2 ) checks whether need to compare (such as the initial password, enter the password again), not by the function execution state, execution is stopped down
(3) whether the data required to verify test (such as regular match), the state is not performed by the function execution is stopped down
(4) function execution state.
<div class="dir-input" oncopy="return false;" oncontextmenu="return false" onselectstart="return false"> <div> <span>*</span> <label ng-bind="label"></label> </div> <form> <input type="{{ntype?ntype:'text'}}" class="form-control" ng-model="data" ng-focus="focus()" ng-blur="blur()" ng-change="change()"> <img src="../../static/img/btn-yincang.png" class="dir-input-img" ng-click="psw_show=true;ntype='text'" ng-show="!psw_show&&psw==='1'" alt="" width="20px" height="20px;"> <img src="../../static/img/btn-xianshi.png" class="dir-input-img" ng-click="psw_show=false;ntype='password'" ng-show="psw_show&&psw==='1'" alt="" width="20px" height="20px;"> </form> <div> <div class="tip" ng-show="tip_show&&tips.length>0"> <div ng-repeat="li in tips" ng-bind="li"></div> <img src="../../static/img/sanjiao-kuan5-gao10.png" alt=""> </div> <img ng-show="img_show" ng-src="{{pass?'../../static/img/icon-Correct-16_16.png':'../../static/img/icon-error-16_16.png'}}"> <span ng-bind="tip_info" ng-show="tip_info_show"></span> </div> </div>
(function () { angular.module('common-dir') .directive('dirInput', function () { return { restrict: 'E', templateUrl: 'module/common-directive/dir-input.html', scope: { data: '=', data1: '=', funs: '=', label: '@', tips: '=', pass: '=', reg: '@', ntype: '@', callback: '&', press: '@', psw: '@' }, replace: true, controller: function ($scope, regExp_m, $timeout) { $scope.focus = function () { $scope.input_state_change('focus'); }; $scope.change = function () { $scope.check_methods.init(); }; $scope.blur = function () { $scope.check_methods.init(); }; $scope.input_state_change = function (params, errinfo) { function change(arr) { $scope.pass = arr[0]; $scope.tip_show = arr[1]; $scope.img_show = arr[2]; $scope.tip_info = arr[3]; $scope.tip_info_show = arr[4]; } var config = { focus: [false, true, false, '', false], err: [false, false, true, '错误', true], success: [true, false, true, '', true] }; var par = params || 'success'; if (params === 'err') { config[par][3] = errinfo; } change(config[par]); }; $scope.funs = { change: $scope.input_state_change }; $scope.check_methods = { init: function () { var that = this; if (that.is_empty()) { if (that.compare()) { if (that.reg()) { that.result(); that.cb(); } } } }, compare: function () { var flag = true; if ($scope.data1) { if ($scope.data !== $scope.data1) { flag = false; $scope.input_state_change('err', '两次输入不一致！'); } } return flag; }, reg: function () { var flag = true; if ($scope.reg) { flag = regExp_m[$scope.reg].test($scope.data); if (!flag) $scope.input_state_change('err', '格式不正确！'); } return flag; }, cb: function () { if (angular.isFunction($scope.callback)) { $timeout(function () { $scope.callback(); }); } }, is_empty: function () { var that = this; var flag = true; if (angular.isUndefined($scope.data) || $scope.data === '') { flag = false; if (!flag) $scope.input_state_change('err', '不能为空！'); } return flag; }, result: function () { $scope.input_state_change(); } }; }, link: function () { } }; }) .factory('regExp_m', function () { return { . 1: / ^ [A-zA-the Z] [A-zA-Z0-9] {} $ 4,24 / , 2:?! / ^ (?! [A-zA-Z] + $) (\ + D $) (?! [@ # $% ^ & * _ | ~ = + \ - <> [{} / \ '!? \ ":;., \] *] + $) ([A-zA?! -z \ d] + $) ( [a-zA-z @ # $% ^ & * _ | ~ = + \ - <> [{} / \ '\ ":;!?., \]?! * ] + $) ([\ d @ # $% ^ & * _ | ~ = + \ - <> [{} / \ '\ ":;!?., \]?! *] + $) [a- ! the Z-zA \ D @ # $% ^ & * _ | ~ = + \ - <> [{} / \ '\ ":;., \]? *] {6,25} $ / // contains ! special alphanumeric symbols # $% ^ & @ * _ | ~ = + \ - <> [{} / \ '\ ":;., \]? }; }); }) ();
.dir-input { display: flex; align-items: center; margin-bottom: 20px; } .dir-input>form { position: relative; } .dir-input>form>input { width: 300px; height: 40px; } .dir-input>form>.dir-input-img { position: absolute; top: 10px; right: 10px; cursor: pointer; } .dir-input>div:first-child { width: 130px; padding-right: 14px; text-align: right; white-space: nowrap; display: flex; justify-content: flex-end; align-items: center; } .dir-input>div:first-child>span:first-child { margin-right: 5px; color: red; } .dir-input>div:first-child>label { margin-bottom: 0; } .dir-input>div:last-child { position: relative; height: 40px; line-height: 40px; } .dir-input>div:last-child>img { width: 14px; height: 14px; margin-left: 8px; } .dir-input>div:last-child>.tip { line-height: 1.5; min-width: 300px; border: 1px solid #dedede; border-radius: 5px; background: #fff; position: absolute; left: 24px; top: 0; z-index: 2; padding: 10px 20px; } .dir-input>div:last-child>.tip>div { font-size: 14px; color: #333333; } .dir-input>div:last-child>.tip>img { width: 15px; height: 16px; position: absolute; left: -15px; top: 10px; } .dir-input>div:last-child>span:last-child { font-size: 14px; color: #999999; }