我有输入框
<input type="text" class="text-primary" ng-pattern="ip_regex or ipv6_regex" name="newIP" ng-model="macbinding.newIP" ng-change="checkDuplicates('newIP')">
我已准备好2种IPv4和IPv6模式。
$scope.ip_regex = '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';
$scope.ipv6_regex = '((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?';
但是,如果字符串包含:
,如何动态地将这些ng-pattern动态应用于该输入库?
实施例。 2001::1
如果输入包含:
,那么我知道它是IPv6,我将使用ng-pattern="ipv6_regex"
这是我可以在前端HTML上实现的,还是我需要解析输入并在我的角度控制器中执行逻辑?
我可以使用ng-if
吗?
答案 0 :(得分:1)
您可以使用ng-model的组合来存储和检查用户的输入,以及timeOut函数来告诉您何时检查输入。例如。
您的输入标记看起来像这样
<input id="textBox" ng-model="$ctrl.userInput" value="$ctrl.userInput"/>
和Js(我用打字稿写的,但它应该足够可读,你得到了要点。)
userInput: string = '';
//setup before functions
typingTimer: number; //timer identifier
//on keyup, start the countdown
$('#textBox').on('keyup', function () {
if (typingTimer){
clearTimeout(typingTimer);
}
//if no keyup event is found in 3000ms (3 seconds) execute doneTyping()
typingTimer = setTimeout(doneTyping, 3000);
});
//user is "finished typing," do something
function doneTyping() {
//check for ':'
var foundSemiColon: boolean = false;
//for every character in, userInput see if that character's code value equals 58.
//58 is the ASCII representation of a semi-colon
for (var i: number = 0; i < userInput.length; i++) {
if (userInput.charCodeAt(i) === 58) {
//Semi-colon found use IPv6
break;
}
}
//if foundSemiColon === false you didn't find a semi-colon
if (!foundSemiColon) {
//use IPv4
}
//Now that you're done and know what to use, clear your timeOut event
clearTimeout(typingTimer);
}