格式化和验证表单AngularJS 1.4
格式化和验证表单AngularJS 1.4
提问于 2015-06-11 12:09:13
我正在构建一个使用angularjs的表单，并且我已经在其中包含了一个amount字段。
我想验证和格式化金额，使无效的金额受到限制，只有有效的金额应该输入，rest所有的都应该被丢弃。有效金额为：
1.23 0.99
所以，基本上，一个数字跟两个小数点。
我对在过滤器或指令之间使用感到困惑，因为我从未使用过它们中的任何一个。如果有人在过去做过类似的事情，如果你能和我分享，或者你能给我解决方案，我会很感激。
我用过像这个ng-pattern="/^[0-9]*\.[0-9][0-9]$/这样的ng模式，但对我不起作用。
我使用的是AngularJS 1.4最新版本。
编辑-我的道德
<input type="number"
name="globalNetPrice"
value="{{netprice.globalNetPrice}}"
ng-model="netprice.globalNetPrice"
class="form-control"
required
ng-minlength="0.01"
ng-maxlength="999"
ng-pattern="/^[0-9]+.[0-9][0-9]$/"
>
<p ng-show="netpriceForm.globalNetPrice.$invalid && !netpriceForm.globalNetPrice.$pristine">
<small class="error" ng-show="netpriceForm.globalNetPrice.$error.required">Net Price is required.</small>
<small class="error" ng-show="netpriceForm.globalNetPrice.$error.number">That is not a Net Price. Please input a valid Net Price.</small>
<small class="error" ng-show="netpriceForm.globalNetPrice.$error.pattern">That is not a valid Net Price. Pattern not valid.</small>
</p>回答 2
Stack Overflow用户
发布于 2015-06-11 12:31:07
您还可以使用以下指令:-
app.directive('numberOnly', function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '='
},
link: function (scope) {
scope.$watch('ngModel', function (newValue, oldValue) {
if (oldValue != undefined && oldValue.length > 0) {
if (newValue != undefined) {
if (typeof newValue == 'string') {
var notNumberCheck = newValue.replace(oldValue, '');
if (isNaN(newValue)) {
if (notNumberCheck != '.') {
scope.ngModel = oldValue;
return;
}
}
}
} else {
scope.ngModel = "";
return;
}
} else {
if (isNaN(newValue) && newValue != '.') {
scope.ngModel = "";
return;
}
}
var arr = String(newValue).split("");
if (arr.length === 0) return;
if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
if (arr.length === 2 && newValue === '-.') return;
if (isNaN(newValue)) {
scope.ngModel = oldValue;
}
});
}
};
})
Stack Overflow用户
发布于 2015-06-11 12:43:39
Angularjs有货币过滤器，您可以轻松使用。
还请检查这个堆栈溢出问题，这里是工作小提琴
app.directive('currencyInput', function() {
return {
restrict: 'A',
scope: {
field: '='
},
replace: true,
template: '<span><input type="text" ng-model="field"></input>{{field}}</span>',
link: function(scope, element, attrs) {
$(element).bind('keyup', function(e) {
var input = element.find('input');
var inputVal = input.val();
//clearing left side zeros
while (scope.field.charAt(0) == '0') {
scope.field = scope.field.substr(1);
}
scope.field = scope.field.replace(/[^\d.\',']/g, '');
var point = scope.field.indexOf(".");
if (point >= 0) {
scope.field = scope.field.slice(0, point + 3);
}
var decimalSplit = scope.field.split(".");
var intPart = decimalSplit[0];
var decPart = decimalSplit[1];
intPart = intPart.replace(/[^\d]/g, '');
if (intPart.length > 3) {
var intDiv = Math.floor(intPart.length / 3);
while (intDiv > 0) {
var lastComma = intPart.indexOf(",");
if (lastComma < 0) {
lastComma = intPart.length;
}
if (lastComma - 3 > 0) {
intPart = intPart.splice(lastComma - 3, 0, ",");
}
intDiv--;
}
}
if (decPart === undefined) {
decPart = "";
}
else {
decPart = "." + decPart;
}
var res = intPart + decPart;
scope.$apply(function() {scope.field = res});
});
}
};})；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30780384
复制相关文章
相似问题
腾讯云开发者
