AngularJS - Ba xác nhận số điện thoại của trường đầu vào

Question

Tôi đang cố xác thực các trường số điện thoại. Điều kiện là các trường được xác thực khi người dùng nhập trường tên vị trí tiếp theo. fiddle Các trường số điện thoại cũng cần tab tự động vào trường nhập điện thoại tiếp theo. [khi nhập mã vùng (3 chữ số), tiêu điểm sẽ chuyển sang trường nhập số điện thoại 3 chữ số tiếp theo). khi thực hiện tập trung vào 4 chữ số cuối cùng.

<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

Bạn có thể sử dụng chỉ thị có xử lý sự kiện để thực hiện việc này.

Updated Fiddle

Những thay đổi quan trọng bao gồm:

1) Tải trọng jQuery trong fiddle bạn trước góc để bạn có được quyền truy cập vào bộ chọn jQuery bên trong chức năng góc.

2) Quấn đầu vào trong một hộp đựng với các chỉ thị thích hợp (Lưu ý: đây cũng có thể được thực hiện với một yếu tố duy nhất với restrict: "E" thay vì restrict: "A" và sử dụng template tài sản để xác định đứa trẻ HTML)

3) Xử lý sự kiện input trên các đầu vào và nếu độ dài vượt quá giá trị trong thuộc tính maxlength, hãy tập trung đầu vào tiếp theo. Điều này thực sự đơn giản với jQuery, nhưng có thể được thực hiện mà không cần nếu bạn thực sự muốn.

4) Có hàng triệu cách để xác thực trên các yếu tố đầu vào, nhưng tôi đã bao gồm một phương pháp đơn giản.

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> 

Chỉ góc

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