如何在文本字段AngularJS中验证IP答案

【问题标题】：How to validate an IP in a text field AngularJS如何在文本字段AngularJS中验证IP
【发布时间】：2014-08-28 12:03:31
【问题描述】：

如何在 AngularJS 的文本字段中验证 IP？目前我正在使用此代码，但它并非在所有情况下都有效。有什么想法吗？

ng-pattern='/^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/

【问题讨论】：

在哪些情况下会失败？
可能会帮助你w3resource.com/javascript/form/ip-address-validation.php
@musically_ut 它接受 0.0.0.0 和 255.255.255.255 。我认为不应该。
@Harikrishnan 对我来说它们看起来像是有效的 IP 地址。这是您要排除的仅有的两个地址吗？
是的，但您不能将其分配给单个主机。因此我不能让用户输入它。

标签： javascript angularjs angular-ui

【解决方案1】：

用途：

/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/

匹配 0.0.0.0 到 255.255.255.255

如果你想删除0.0.0.0 和255.255.255.255 我建议你添加额外的if 声明。否则正则表达式会太复杂。

观察者示例：

$scope.ip = '1.2.3.4';

    $scope.$watch(function () {
        return $scope.ip;
    },

    function (newVal, oldVal) {            
        if (
            newVal != '0.0.0.0' && newVal != '255.255.255.255' &&
            newVal.match(/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/))
        {
             // Match attempt succeeded
        } else {
            // Match attempt failed
        }
    })

演示Fiddle

[编辑]

最好的办法是创建指令，例如：<ip-input>

此示例可能有助于如何为自定义输入创建指令：format-input-value-in-angularjs

【讨论】：

您可以将此功能放在一个角度函数中，并将其用作 ng-change 指令中的表达式，而不是在控制器中添加手表。
@Ronald91 好吧，当然指令方式更合适，比如<input-ip>。但是 SO 要求正则表达式验证。我只为演示添加了观察者。顺便说一句，这是我用$parsers写过的一个例子：stackoverflow.com/questions/19890364/…

【解决方案2】：

这是验证 IPv4 和 IPv6 地址的指令

app.directive('ipformat',function(){
  return {
      require: 'ngModel',
      link: function(scope,elem,attrs,ctrl){
          ctrl.$validators.ipformat= function (modelValue){
              if (ctrl.$isEmpty(modelValue)){
                  return false;
              }
              var expression = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/;
              if (expression.test(modelValue)) {
                return true;
            }
            else {
              return false;
            }
          }
      }
  }
});

并将此指令与表单中的输入字段一起使用

<input type="text" class="form-control" name="ipaddresstxt" id="ipaddressid"
                                     ng-model="ipaddress" 
                                     ipformat>

记住指令需要 ng-model。根据使用情况随时更新。

【讨论】：