AngularJS - 三个输入的现场电话号码验证-Java 学习之路

我正在尝试验证电话号码字段 . 条件是一旦用户输入下一个位置名称字段就会验证字段 . fiddle此外，电话号码字段还需要自动选项卡到下一个电话输入字段 . [在输入区号（3位数）时，焦点应转到下一个3位数的电话输入字段） . 完成时专注于最后4位数 .

<form id="aidLocationForm" class="well form-inline">
    <div class="control-group phone-group">
      <label for="phone1" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label">Primary contact number</label>
      <div class="controls">
        <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$">
        <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$">
        <input type="text" value="" maxlength="4" ng-minlength="4" ng-maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" aria-label="Primary contact number" pattern="/^[0-9]{4}$">
      </div>
    </div>
    <div class="control-group">
      <label for="primaryLocationName" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label aid-primary-location-location-lbl">Primary Location Name</label>
      <!-- end of label -->
      <div class="controls">
        <input type="text" name="primaryLocationName" id="primaryLocationName" class="col-xs-12 col-sm-9 col-md-6 col-lg-6 col-xl-6 aid-primary-location-name-input" ng-model="" required placeholder="Enter the city followed by location" size="50" maxlength="50"
        aria-disabled="true" aria-label="Primary Location Name">
      </div>
    </div>
    <button type="submit" class="btn">Sign in</button>
  </form>

1 回答

您可以使用带有事件处理的指令来完成此操作 .

更新小提琴

主要变化包括：

1）在角度之前在你的小提琴中加载jQuery，这样你就可以访问角度函数内的jQuery选择器 .

2）使用正确的指令将输入包装在容器中（注意：这也可以使用 restrict: "E" 而不是 restrict: "A" 的单个元素完成，并使用 template 属性来定义子HTML）

3）处理输入上的 input 事件，如果长度超过 maxlength 属性中的值，则将焦点放在下一个输入上 . 这对jQuery来说非常简单，但如果你真的想要，可以不用 .

4）有一百万种方法可以对输入进行验证，但我已经提供了一种简单的方法 .

HTML

<div phone-input>
    <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" 
         aria-label="Primary contact number" pattern="^[0-9]{3}$">
    <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" 
         aria-label="Primary contact number" pattern="^[0-9]{3}$">
    <input type="text" value="" maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" 
         aria-label="Primary contact number" pattern="^[0-9]{4}$">
</div>

Angular Directive

.directive("phoneInput", function () {
  return {
    restrict: "A",
    link: function (scope, element, attrs) {
      function checkForErrors(input) {
        var errors = "";
        if (!new RegExp(input.attr("pattern")).test(input.val())) {
            errors += `Field must contain ${input.attr("maxlength")} numbers!\n`;
        }
        return errors;
      }
      element.on("input", "input", function () {
        var trigger = $(this);
        if (trigger.val().length >= trigger.attr("maxlength")) {
            trigger.blur().next().focus();
        }
      });

      element.on("blur", "input", function () {
        var trigger = $(this);
        var errors = checkForErrors(trigger);
        trigger.attr("title", errors);
        if (trigger.val().trim() === "") {
            trigger.addClass("invalid-field");
            trigger.attr("title", "Field cannot be empty!");
        }
        else if (errors === "") {
          trigger.removeClass("invalid-field");
        }
        else {
          trigger.addClass("invalid-field");
          trigger.focus();
        }
      });
    }
  }
})

回复于 2024-05-04T12:39:58+08:00

AngularJS - 三个输入的现场电话号码验证

1 回答

相关问题