如何在AngularJS的文本字段中验证IP地址

Question

如何在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]))$/'

- Harikrishnan

---

@Harikrishnan 对我来说，它们看起来是有效的IP地址。这是您想要排除的唯一两个地址吗？ - musically_ut

将您的ng-pattern值更新为'/\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}/'。 这对我有效。这里是更多详细信息的链接。https://dev59.com/SnPYa4cB1Zd3GeqPfSTM - Gene Parcellano

哎呀，我使用了错误的ng-pattern值，请使用这个值代替："/^([0-9]{1,3})...$/". - Gene Parcellano

我想补充一下，我最近发布了一个属性指令来处理IP地址。欢迎留下反馈或改进建议。 - CautemocSg

好的，我会尝试。 - Harikrishnan

Answer 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 语句。否则正则表达式将会过于复杂。

带有 watcher 的示例：

$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

- Maxim Shoustin

---

你可以将观察器的功能放在一个Angular函数中，并将其作为ng-change指令中的表达式，而不是将其添加到控制器中。 - Ronald91

@Ronald91 当然，指令方式更合适，比如 <input-ip>。但是SO要求使用正则表达式验证。我只添加了观察器用于演示。顺便说一句，这是我曾经使用$parsers编写的示例：https://dev59.com/mGIj5IYBdhLWcg3wx34x#19890485 - Maxim Shoustin

Answer 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。根据使用情况随意更新。

- Ashish Bhagasra