`
Morel
  • 浏览: 4848 次
社区版块
存档分类
最新评论

angular常用directive,身份证号码,倒计时按钮,重复值,input后端校验

阅读更多
/**
 * Created by jing on 14-11-4.
 */
angular.module('app')
  .directive('jingIdCard', function () {
    /**
     * 身份证号码验证
     *
     * @param cardNo
     *            {String} 证件号码
     * @returns info {Object} 身份证信息.
     *
     */
    var getIdCardInfo = function (cardNo) {
      var info = {
        isTrue: false, // 身份证号是否有效。默认为 false
        year: null,// 出生年。默认为null
        month: null,// 出生月。默认为null
        day: null,// 出生日。默认为null
        isMale: false,// 是否为男性。默认false
        isFemale: false // 是否为女性。默认false
      };

      if (!cardNo && 15 != cardNo.length && 18 != cardNo.length) {
        info.isTrue = false;
        return info;
      }

      if (15 == cardNo.length) {
        var year = cardNo.substring(6, 8);
        var month = cardNo.substring(8, 10);
        var day = cardNo.substring(10, 12);
        var p = cardNo.substring(14, 15); // 性别位
        var birthday = new Date(year, parseFloat(month) - 1, parseFloat(day));
        // 对于老身份证中的年龄则不需考虑千年虫问题而使用getYear()方法
        if (birthday.getYear() != parseFloat(year)
          || birthday.getMonth() != parseFloat(month) - 1
          || birthday.getDate() != parseFloat(day)) {
          info.isTrue = false;
        } else {
          info.isTrue = true;
          info.year = birthday.getFullYear();
          info.month = birthday.getMonth() + 1;
          info.day = birthday.getDate();
          if (p % 2 == 0) {
            info.isFemale = true;
            info.isMale = false;
          } else {
            info.isFemale = false;
            info.isMale = true;
          }
        }
        return info;
      }

      if (18 == cardNo.length) {
        var year = cardNo.substring(6, 10);
        var month = cardNo.substring(10, 12);
        var day = cardNo.substring(12, 14);
        var p = cardNo.substring(14, 17);
        var birthday = new Date(year, parseFloat(month) - 1, parseFloat(day));
        // 这里用getFullYear()获取年份,避免千年虫问题
        if (birthday.getFullYear() != parseFloat(year)
          || birthday.getMonth() != parseFloat(month) - 1
          || birthday.getDate() != parseFloat(day)) {
          info.isTrue = false;
          return info;
        }

        var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];// 加权因子
        var Y = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];// 身份证验证位值.10代表X

        // 验证校验位
        var sum = 0; // 声明加权求和变量
        var _cardNo = cardNo.split("");

        if (_cardNo[17].toLowerCase() == 'x') {
          _cardNo[17] = 10;// 将最后位为x的验证码替换为10方便后续操作
        }
        for (var i = 0; i < 17; i++) {
          sum += Wi[i] * _cardNo[i];// 加权求和
        }
        var i = sum % 11;// 得到验证码所位置

        if (_cardNo[17] != Y[i]) {
          return info.isTrue = false;
        }

        info.isTrue = true;
        info.year = birthday.getFullYear();
        info.month = birthday.getMonth() + 1;
        info.day = birthday.getDate();

        if (p % 2 == 0) {
          info.isFemale = true;
          info.isMale = false;
        } else {
          info.isFemale = false;
          info.isMale = true;
        }
        return info;
      }
      return info;
    }
    return {
      require: 'ngModel',
      link: function (scope, ele, attrs, c) {
        scope.$watch(attrs.ngModel, function (n) {
          if (!n) return;
          var cardInfo = getIdCardInfo(n);
          c.$setValidity('isIdCard', cardInfo.isTrue);
        });
      }
    }

  })
  .directive('jingTimeButton', function ($interval) {

    function link(scope, ele, attrs, c) {
      var timeoutId;
      var seconds;
      var txt = ele.text();
      ele.on('click', function () {
        seconds = parseInt(attrs.jingSeconds) || 60;
        ele.attr('disabled', 'disabled');
        scope.$apply(scope.jingAction);
        timeoutId = $interval(function () {
          seconds--;
          if (seconds >= 0) {
            ele.text(txt + '(' + seconds + ')');
          } else {
            stopF();
            ele.removeAttr('disabled');
            ele.prop('disabled', false);
          }
        }, 1000);
        ele.on('$destroy', function () {
          stopF();
        });
      });

      function stopF() {
        if (angular.isDefined(timeoutId)) {
          $interval.cancel(timeoutId);
          timeoutId = undefined;
        }
      }
    }

    return {
      scope: {jingAction: '&'},
      link: link
    }
  })

  .directive('jingEqualTo', function () {
    return {
      restrict: "A",
      require: 'ngModel',
      link: function (scope, element, attrs, ctrl) {
        var tageCtrl = scope.$eval(attrs.jingEqualTo);
        tageCtrl.$parsers.push(function (viewValue) {
          ctrl.$setValidity('equalto', viewValue == ctrl.$viewValue);
          return viewValue;
        });
        ctrl.$parsers.push(function (viewValue) {
          if (viewValue == tageCtrl.$viewValue) {
            ctrl.$setValidity('equalto', true);
            return viewValue;
          } else {
            ctrl.$setValidity('equalto', false);
            return undefined;
          }
        });
      }
    };
  })
  .directive('jingBtcAddress', function (Http, $timeout) {
    return {
      require: 'ngModel',
      link: function (scope, ele, attrs, c) {
        var timeout;
        scope.$watch(attrs.ngModel, function (n) {
          if (timeout) $timeout.cancel(timeout);
          if (!n) return;
          timeout = $timeout(function () {
            Http.get('btc/checkAddress/' + n).success(function (data) {
              c.$setValidity('isBtcAddress', data.checked);
            }).error(function (data) {
              c.$setValidity('isBtcAddress', false);
            });
          }, 600);
        });
      }
    };
  });
;


分享到:
评论

相关推荐

    angular 封装全局按钮权限

    "angular 封装全局按钮权限"这一主题,旨在探讨如何在Angular应用中实现细粒度的权限管理,将权限控制深入到按钮这一级别的元素。这样的设计允许开发者精确地控制用户对界面上各个功能点的访问,从而提供更加安全和...

    Ionic + Angular.js实现验证码倒计时功能的方法

    在开发移动应用时,验证码倒计时功能是一个常见的需求,用于限制用户在短时间内频繁发送验证码。在本篇文章中,我们将探讨如何使用Ionic框架结合Angular.js实现这一功能。Ionic是一个流行的HTML5移动应用框架,它...

    angular-directive.g-signin, 在按钮中,用于 Google + 符号的AngularJS指令.zip

    angular-directive.g-signin, 在按钮中,用于 Google + 符号的AngularJS指令 Angular Google Button按钮主页Google + 登录按钮的好开始位置。 指定你的客户 id,你就完成了。 几乎,你还需要为 event:google-plus-...

    类似淘宝促销产品倒计时效果

    - 如React、Vue或Angular等现代前端框架可以更高效地管理状态和组件,简化倒计时功能的实现。例如,在React中,可以创建一个自定义组件`PromoCountdown`,利用state和生命周期方法来更新倒计时。 5. **后端开发**...

    angular input 输入格式化

    angular input 输入格式化

    angular2倒计时组件使用详解

    Angular2倒计时组件是一种可复用的UI组件,它允许开发者在应用中显示一个动态更新的倒计时。在本文中,我们将深入探讨如何在Angular2中创建和使用这样的组件,以及它的工作原理。 首先,组件的核心在于接收并处理从...

    angularjs短信验证码及秒倒计时

    为了实现倒计时功能,我们需要在`$scope`上定义一个变量来保存剩余时间,比如`countdown`,并设置一个定时器来更新这个值: ```javascript var countdownInterval; $scope.countdown = 60; // 初始倒计时为60秒 //...

    后端功能图标按钮

    而“后端功能图标按钮”通常指的是用于后端操作的图形用户界面元素,这些元素以图标和按钮的形式呈现,帮助用户直观地理解和操作后端功能。在设计和开发过程中,图标和按钮的设计对于提升用户体验至关重要。 图标是...

    angularjs自定义指令directive正则表达校验

    对于数字校验,我们可以创建一个`numberValidator`指令,确保输入值为整数或浮点数: ```javascript app.directive('numberValidator', function() { return { require: 'ngModel', link: function(scope, ...

    前端项目-angular-leaflet-directive.zip

    《Angular Leaflet Directive:构建交互式前端地图应用》 Angular Leaflet Directive是一个强大的AngularJS指令库,它使得在AngularJS应用程序中集成Leaflet地图变得极其简单。Leaflet是一款轻量级且功能丰富的...

    基于angular directive的markdown编辑器

    在本文中,我们将深入探讨如何使用Angular Directive构建一个Markdown编辑器。Markdown编辑器是一种常见的文本编辑工具,它允许用户以简洁易读的语法输入文本,然后转换为HTML格式,广泛应用于博客、文档编写和笔记...

    Angular.js实现获取验证码倒计时60秒按钮的简单方法

    本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧。 一、controller中代码 angular.module('...

    Angular6 发送手机验证码按钮倒计时效果实现方法

    1.组件中定义两个变量,分别用于控制按钮是否可以点击(countDown)和按钮上的倒计时数字(countDownTime): countDown = false; countDowmTime = 60; // 这里设置倒计时为60S showButtonText = '发送短信验证码'...

    日期倒计时

    在IT行业中,日期倒计时是一项常见的功能,尤其在日历应用、项目管理软件或活动策划网站中。这个功能能够帮助用户追踪特定日期或事件距离现在还有多少天,从而进行有效的规划和准备。"时间倒计时,精确到days"的描述...

    Angular滑动条控件指令directive

    在Angular框架中,滑动条控件是一种常用的用户交互组件,允许用户通过拖动滑块在指定范围内选择一个值。这种交互方式直观且易于理解,常用于调整音量、亮度或者在一组数值中进行选择。在本文中,我们将深入探讨如何...

    前端项目-angular-pageslide-directive.zip

    前端项目-angular-pageslide-directive,AngularJS sliding panel for serving additional content from off the page

    angular ng-click防止重复提交实例

    Angular ng-click 防止重复提交实例是一个常见的问题,在 Angular 应用程序中,如果用户在短时间内多次点击按钮,可能会导致重复提交数据,从而影响应用程序的稳定性和性能。为了解决这个问题,本文将介绍两种方法来...

    ionic+AngularJs实现获取验证码倒计时按钮

    按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中。设置一个$timeout,60秒...

    Angular之指令Directive用法详解

    例如,`&lt;input type="text" ng-model="username"&gt;`,输入框的值会实时更新到`username`变量。 5. `ng-controller`:定义了一个控制器区域,用于组织和管理数据。如`&lt;div ng-controller="MyController"&gt;...&lt;/div&gt;`。...

Global site tag (gtag.js) - Google Analytics