1、事件:
(1)onfocus(直接-显示状态);
(2)onchange(逐步检验,根据检验结果-显示状态);
(3)onblur(逐步检验,根据检验结果-显示状态)
2、状态函数的定义
(1)初始化状态
(2)根据参数,处理异常情况下的状态
(3)使用状态
3、检验函数的定义
(1)检验是否为空,为空执行状态函数,停止向下执行
(2)检验是否需要对比(比如初次输入密码,再次输入密码),不通过执行状态函数,停止向下执行
(3)检验是否需要数据验证(比如正则匹配),不通过执行状态函数,停止向下执行
(4)执行状态函数。
<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-Z][a-zA-Z0-9]{4,24}$/, 2: /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]*]+$)(?![\d!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]*]+$)[a-zA-Z\d!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]*]{6,25}$/ // 同时包含 字母 数字 特殊符号 !@#$%^&*?_|~=+\-<>[{}/\'\":;,.\] }; }); })();
.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; }