AngularJs 文本框验证，限制具有正则表达式负前瞻的字符

Question

在这里使用角度js：

我有一个文本框，我想在其中应用某些正则表达式并阻止用户使用某些字符。这是我想要的：

• 防止用户以下划线开头和结尾。
• 不允许使用特殊字符
• 允许使用字符和数字，并且可以以以下任一字符开头或结尾
• 字符/数字之间只允许下划线，同样不允许在 开始或结束。
• 不应有连续的下划线。

以下是我拥有的代码：

文本框：

<input type="text" name="uname" ng-model="uname" required class="form-
control input-medium" placeholder="Enter  name..." maxlength="20" restrict-
field="alpha-numeric" ng-trim="false" />

命令：

.directive("restrictField", function() {
return {
require: "ngModel",
restrict: "A",
link: function(scope, element, attrs, ctrl) {
var regReplace,
preset = {
"alphanumeric-spl": "\w_./s/g",
"alphanumeric-underscore": "\w_",
"numeric": "0-9",
"alpha-numeric": "\w"           
},
filter = preset[attrs.restrictField] || attrs.restrictField;
ctrl.$parsers.push(function(inputValue) {
regReplace = new RegExp('[^' + filter + ']', 'ig');
if (inputValue == undefined) return "";
cleanInputValue = inputValue.replace(regReplace, "");
if (cleanInputValue != inputValue) {
ctrl.$setViewValue(cleanInputValue);
ctrl.$render();
}
return cleanInputValue;
});
}
};
});

虽然上述适用于我在指令中使用的简单模式，但不适用于我上面描述的模式。从我的另一篇文章中，我得到了用于正则表达式负面展望的模式，如下所示：

^(?!_)(?!.*_$)[a-zA-Z0-9_]+$

但是，如果我尝试将其包含在我的指令中，则这是行不通的。

这是我创建的示例代码笔：https：//codepen.io/anon/pen/LJBbQd

如何应用上述正则表达式。如果不是这样，是否有解决方法或任何其他方法来使用此正则表达式限制我的文本框。

谢谢

Answer 1

我建议在末尾允许一个_，并使用带有正则表达式的HTML5模式属性，该正则表达式要求最后一个字符是任何字符，但带有pattern=".*[^_]"的_。如果需要允许空字符串，请使用pattern="(?:.*[^_])?"。

var app = angular
.module("myApp", ["ui.bootstrap"])
.directive("restrictField", function() {
return {
require: "ngModel",
restrict: "A",
link: function(scope, element, attrs, ctrl) {
var regReplace,
preset = {
'alphanumeric-spl': '[^\w\s./]+', // Removes all but alnum, _ . / whitespaces
'alphanumeric-underscore': '^_+|_+(?=_)|\W+', // Removes all _ at start and all _ before a _ and all but alnum and _
'numeric': '[^0-9]+', // Removes all but digits
'alpha-numeric': '[\W_]+' // Removes all but alnum
},
filter = preset[attrs.restrictField] || attrs.restrictField;
ctrl.$parsers.push(function(inputValue) {
console.log(filter);
regReplace = RegExp(filter, 'ig');
if (inputValue == undefined) return "";
cleanInputValue = inputValue.replace(regReplace, "");
if (cleanInputValue != inputValue) {
ctrl.$setViewValue(cleanInputValue);
ctrl.$render();
}
return cleanInputValue;
});
}
};
});
// Define the `appController` controller on the `ReportsMockUpsApp` module
app.controller("ctrl", function($scope) {});

body {
padding: 10px
}
input:valid {
color: black;
border: 5px solid #dadadada;
border-radius: 7px;
}
input:invalid {
color: navy;
outline: .glowing-border:focus;
border-color: #ff1050;
box-shadow: 0 0 10px #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div ng-controller="ctrl">
<label>Wow</label>
<input type="text" pattern=".*[^_]" name="uname" ng-model="uname" required class="form-control input-medium" placeholder="Enter  name..." maxlength="20" restrict-field="alphanumeric-underscore" ng-trim="false" />
</div>
</div>