AngularJS - 三個輸入字段的電話號碼驗證

Question

我試圖驗證電話號碼字段。一旦用戶輸入下一個位置名稱字段，條件就會被驗證。 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> 

Answer 1

您可以使用指令與事件處理做到這一點。

Updated Fiddle

的主要變化包括以下內容：

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> 

角指令

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