Angularjs 1.x 自定义表单验证写法

本文介绍了AngularJS 1.x中自定义表单验证的两种方法。第一种方法来源于AngularJS教程,第二种方法实现了异步表单验证,详细解析来自于一篇CSDN博客。
摘要由CSDN通过智能技术生成

我看Angularjs的东西,实际工作上用到了自定义表单验证。在学习的过程中,看到了两种写法:

写法一:

这个写法来自

http://www.angularjs.net.cn/tutorial/4.html

var app = angular.module('form-example1', []);
 
var INTEGER_REGEXP = /^\-?\d+$/;
app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (INTEGER_REGEXP.test(viewValue)) {
          // 验证通过
          ctrl.$setValidity('integer', true);
          return viewValue;
        } else {
          // 验证不通过 返回 undefined (不会有模型更新)
          ctrl.$setValidity('integer', false);
          return undefined;
        }
      });
    }
  };
});

 

写法二:

这个写法实现了 异步的表单验证

这个写法来自下面这个

https://blog.csdn.net/jax2000/article/details/51531493

 

'use strict';
angular.module('app', [])
 
.directive('phone', function ($q, $http) {
    return {
        require: 'ngModel',
        link: function (scope, ele, attrs, ctrl) {
            ctrl.$asyncValidators.phone = function (modelValue, viewValue) {
                var d = $q.defer();
                $http.get('phone.json')
                .success(function (phoneList) {
                    if (phoneList.indexOf(parseInt(modelValue)) >= 0) {
                        d.reject();
                    } else {
                        d.resolve();
                    }
                });
                return d.promise;
            }
        }
    }
})
 
.directive('username', function ($q, $http) {
    return {
        require: 'ngModel',
        link: function (scope, ele, attrs, ctrl) {
            ctrl.$validators.username = function (modelValue, viewValue) {
                if (modelValue) {
                    return modelValue.length > 5 ? true : false;
                };
                return false;
            }
        }
    }
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值