Проверка IP-адреса во время набора текста в AngularJS

Question

Я новичок в angularjs.Я создаю директиву костюма, которая проверяет IP-адрес по событию keyperss текстового поля.Это хорошо работает, но, я думаю, будет более эффективный способ реализации с использованием regx или любой другой вещи, такой как парсер или фильтр и т. Д.

, пожалуйста, помогите мне улучшить это.

//Declare Main and sub modules
angular.module('CompanyApp', []);

//Initialize variables when DOM is ready
angular.module('CompanyApp').run(['$rootScope', function ($rootScope) { } ]);

(function () {
    'use strict';
    angular.module('CompanyApp').controller('TestCtrl', ['$scope', '$rootScope', TestCtrl]);

    function TestCtrl($scope, $rootScope) {
        $scope.ipAddress = '';
       }
})()
angular.module('CompanyApp').directive("ipValidator", function () {
    var directive = {};
    directive.restrict = 'A'
    directive.compile = function (element, attributes) {
        var link = function (scope, element, attrs) {
            element.bind("keypress", function (e) {
                var key = e.key;
                var code = e.keyCode;
                var txt = element.val();                
                txt += key;
                var len = txt.length;
                var lastchar = txt.charAt(len-2);
                var txtList = txt.split('.');
                if ((len == 1 ||lastchar==='.')&& code == 46) {
                    e.preventDefault();
                }
                else if (!(code <= 57 && code >= 46) || len >= 16 || txtList.length > 4) {
                    e.preventDefault();
                }
                else {
                    txtList.forEach(function (value) {
                        var intValue = parseInt(value);
                        if (intValue > 255 || intValue < 0) {
                            e.preventDefault();
                        }
                    });

                }
                          });
        }
        return link;
    }
    return directive;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<div name="divCompanyContainer" ng-app="CompanyApp" ng-controller="TestCtrl" ng-init="Init()">
<input type="text" ng-model="ipAddress" ip-validator placeholder="Ip address"  /> <br />
</div>

Answer 1

Во-первых, давайте поговорим о регулярном выражении .Тогда алгоритм мы могли бы использовать.

Регулярные выражения и IP

(Примечание: регулярные выражения IP получены из Regular-expressions.info -Как найти или проверить IP-адрес .)

Полное регулярное выражение для IP-адреса может быть:

^(?:(?: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]?)$

• Вы можетеобратите внимание, что три первых байта проверяются одним и тем же шаблоном ниже (в окружении ^ и $):

  ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.)$
  

• Четвертый байт отличается:

  ^(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
  

Простой алгоритм

(Примечание: я рассматриваю только событие keypress.)

Поскольку IP проверяется постепенно , мы можем предположить при каждой проверке, что деталь является уже правильной .

Алгоритм будет, длякаждое нажатие клавиши :

1. Получить * * * * * * * * * * * * * * * введенных байтов , разделенных точкой .
2. Если массив содержит больше чем foПри вводе данных пользователь вводит дополнительную точку после действительного IP, ввод отклоняется, return false
3. Если байт предпоследний пустой строка , пользователь попытался ввести вторую точку , ввод отклонен, возврат false
4. Если последний байт пустая строка , это нормально, потому что пользователь просто ввел точку , return true
5. Последний байт 1089 * не пусто, давайте проверим это с помощью соответствующего регулярного выражения;если он соответствует регулярному выражению, то return true else return false.

Ниже рабочего фрагмента вы можете адаптироваться.

var first3BytesRg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))$/;
var fourthByteRg = /^(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

document.getElementById("ip").onkeypress = preventInvalid;

function preventInvalid(e) {
  return validateIP(e.target.value + String.fromCharCode(e.which));
}

function validateIP(ip) {
  var splitted = ip.split(".");
  var nb = splitted.length;
  
  if (nb > 4) return false;
  if (splitted[nb - 2] == "") return false;
  if (splitted[nb - 1] == "") return true;
  
  
  if (nb < 4) {
    return first3BytesRg.test(splitted[nb - 1]);
  }
  
  return fourthByteRg.test(splitted[nb - 1]);
}

IP <input type="text" id="ip" />