134、输入框-提示逻辑

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