3
編輯：請隨意添加額外的驗證，這將是有用的其他人，使用這個簡單的指令。角度輸入限制指令 - 否定正則表達式
-
我試圖創建一個角指令限制輸入的字符在文本框中。我已經成功地使用了幾個常見用例（alphbetical，字母數字和數字），但使用流行的方法來驗證電子郵件地址，日期和貨幣我無法讓指令工作，因爲我需要它否定正則表達式。至少這是我認爲需要做的。
任何貨幣（可選的千分位數和美分），日期（月/日/年）和電子郵件援助非常感謝。我對正則表達式不感興趣。
這是我目前有： http://jsfiddle.net/corydorning/bs05ys69/
HTML
<div ng-app="example">
<h1>Validate Directive</h1>
<p>The Validate directive allow us to restrict the characters an input can accept.</p>
<h3><code>alphabetical</code> <span style="color: green">(works)</span></h3>
<p>Restricts input to alphabetical (A-Z, a-z) characters only.</p>
<label><input type="text" validate="alphabetical" ng-model="validate.alphabetical"/></label>
<h3><code>alphanumeric</code> <span style="color: green">(works)</span></h3>
<p>Restricts input to alphanumeric (A-Z, a-z, 0-9) characters only.</p>
<label><input type="text" validate="alphanumeric" ng-model="validate.alphanumeric" /></label>
<h3><code>currency</code> <span style="color: red">(doesn't work)</span></h3>
<p>Restricts input to US currency characters with comma for thousand separator (optional) and cents (optional).</p>
<label><input type="text" validate="currency.us" ng-model="validate.currency" /></label>
<h3><code>date</code> <span style="color: red">(doesn't work)</span></h3>
<p>Restricts input to the mm/dd/yyyy date format only.</p>
<label><input type="text" validate="date" ng-model="validate.date" /></label>
<h3><code>email</code> <span style="color: red">(doesn't work)</span></h3>
<p>Restricts input to email format only.</p>
<label><input type="text" validate="email" ng-model="validate.email" /></label>
<h3><code>numeric</code> <span style="color: green">(works)</span></h3>
<p>Restricts input to numeric (0-9) characters only.</p>
<label><input type="text" validate="numeric" ng-model="validate.numeric" /></label>
的JavaScript
angular.module('example', [])
.directive('validate', function() {
var validations = {
// works
alphabetical: /[^a-zA-Z]*$/,
// works
alphanumeric: /[^a-zA-Z0-9]*$/,
// doesn't work - need to negate?
// taken from: http://stackoverflow.com/questions/354044/what-is-the-best-u-s-currency-regex
currency: /^[+-]?[0-9]{1,3}(?:,?[0-9]{3})*(?:\.[0-9]{2})?$/,
// doesn't work - need to negate?
// taken from here: http://stackoverflow.com/questions/15196451/regular-expression-to-validate-datetime-format-mm-dd-yyyy
date: /(?:0[1-9]|1[0-2])\/(?:0[1-9]|[12][0-9]|3[01])\/(?:19|20)[0-9]{2}/,
// doesn't work - need to negate?
// taken from: http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
// works
numeric: /[^0-9]*$/
};
return {
require: 'ngModel',
scope: {
validate: '@'
},
link: function (scope, element, attrs, modelCtrl) {
var pattern = validations[scope.validate] || scope.validate
;
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue.replace(pattern, '')
;
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});
是否僅僅希望在輸入結尾使用無效字符來糾正輸入（比較在第一個正則表達式中使用$）？我會理解這一點，因爲當在字符串中間鍵入字符時，校正器將插入符號移動到最後是不方便的。另一方面，這不會阻止用戶插入無效字符......只要告訴我您是否期望驗證僅拒絕具有錯誤結尾的字符串。 – trincot
我希望它必須與用戶輸入的格式相匹配。如果與格式不匹配，則無法輸入密鑰 – CoryDorning
那麼您如何期待某人輸入日期？如果你從頭開始打字，那麼當你輸入第一個數字時，你的輸入將被拒絕，因爲它不是一個有效的日期... – trincot