我正在尝试验证电话号码字段.条件是一旦用户输入下一个位置名称字段,就会验证字段.
fiddle
此外,电话号码字段需要自动选项卡到下一个电话输入字段. [在输入区号(3位数)时,焦点应转到下一个3位数的电话输入字段).完成时专注于最后4位数.
此外,电话号码字段需要自动选项卡到下一个电话输入字段. [在输入区号(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)在角度之前在你的小提琴中加载jQuery,这样你就可以访问角度函数内的jQuery选择器了.
2)使用正确的指令将输入包装在容器中(注意：这也可以使用带有restrict的单个元素来完成：“E”而不是restrict：“A”并使用template属性来定义子HTML)
3)处理输入上的输入事件,如果长度超过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",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();
}
});
}
}
})
