AngularJS - 三输入字段电话号码验证

Posted 2023-05-09

【中文标题】AngularJS - 三输入字段电话号码验证

【英文标题】：AngularJS - Three input field phone number validation

【发布时间】：2017-10-15 21:54:59

【问题描述】：

我正在尝试验证电话号码字段。条件是一旦用户输入下一个位置名称字段，这些字段就会得到验证。 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>

【问题讨论】：

你的小提琴不起作用。请发布一个工作版本。

发帖前你有没有检查过控制台？它不起作用！

@Phix -- 我的错……我添加了检查长度的基本验证并添加了 jquery.jsfiddle.net/priyaa2002/mvsyde1o/

@dragonfly 嘿，看看我的解决方案，如果这就是你要找的，请告诉我。

【参考方案1】：

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

Updated Fiddle

主要变化如下：

1) 在你的小提琴 before angular 中加载 jQuery，这样你就可以在 angular 函数中访问 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>

角度指令

.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();
        
      );
    
  
)

【讨论】：

电话字段只能接受号码，当无效时应显示错误消息。但是小提琴没有显示任何错误信息

@dragonfly 可能是更新您问题的好信息。我会相应地更新我的答案

@dragonfly 已编辑验证。