我正在对输入类型进行一些验证。
<input
type="number"
min="0"
decimal-places=""
ng-model="candidate.ctc"
class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateCTCInputPosition"
id="ctc"
placeholder="CCTC"
autocomplete="off"
required="">
在这里,这个用户不能将
0
作为输入,因此,当用户键入0
时,它会将其视为false
值。因此,用户不应该使用
keyups
键入负值,而且应该接受0
。我怎样才能做到这一点? 最佳答案
下面是一个有效的解决方案:
http://jsfiddle.net/qoL16sup/
指令:
decimalPlaces.$inject = ['$filter','$locale'];
function decimalPlaces($filter,$locale){
return {
require: 'ngModel',
link: function(scope,element,attrs,ngModelCtrl){
var groupSep = $locale.NUMBER_FORMATS.GROUP_SEP;
var decimalSep = $locale.NUMBER_FORMATS.DECIMAL_SEP;
var decimalPlaces = scope.$eval(attrs['decimalPlaces']) || 0;
var pattern = decimalPlaces > 0 ?
new RegExp('^\\d*(\\'+ decimalSep +')?[0-9]{0,' + decimalPlaces + '}$') : new RegExp('^\\d*$');
element.bind('keypress',function(e){
var lastChar = e.charCode!==0?String.fromCharCode(e.charCode):'';
var selectionStart = element[0].selectionStart;
var selectionEnd = element[0].selectionEnd;
var newVal = element.val().slice(0,selectionStart) + lastChar + element.val().slice(selectionEnd);
if(!pattern.test(newVal)){
e.preventDefault();
}
});
element.bind('blur',function(){
var value = ngModelCtrl.$viewValue || ngModelCtrl.$modelValue;
if (ngModelCtrl.$isEmpty(value)) return null;
if(pattern.test(value)){
element.val($filter('number')(value,decimalPlaces));
}else{
element.val('');
ngModelCtrl.$setViewValue('');
ngModelCtrl.$commitViewValue();
}
});
element.bind('focus',function(){
var value = ngModelCtrl.$modelValue || ngModelCtrl.$viewValue;
if (ngModelCtrl.$isEmpty(value)) return null;
element.val(value);
});
ngModelCtrl.$parsers.unshift(function(value){
if (ngModelCtrl.$isEmpty(value)) return null;
if(pattern.test(value)){
value = parseFloat(value);
if(decimalPlaces){
value = value.toFixed(decimalPlaces);
}else{
value = Math.floor(value);
}
return parseFloat(value);
}else{
return null;
}
});
if (angular.isDefined(attrs.min)) {
var minVal = scope.$eval(attrs.min);
ngModelCtrl.$validators.min = function(value) {
return ngModelCtrl.$isEmpty(value) || angular.isUndefined(minVal) || value >= minVal;
};
}
if (angular.isDefined(attrs.max)) {
var maxVal = scope.$eval(attrs.max);
ngModelCtrl.$validators.max = function(value) {
return ngModelCtrl.$isEmpty(value) || angular.isUndefined(maxVal) || value <= maxVal;
};
}
}
}
}
HTML格式:
<form name="myForm" novalidate autocomplete="off">
<label>
Decimal places = 0
<input
type="text"
name="input1"
decimal-places="0"
ng-model="model.input1"
autocomplete="off"
required>
</label>
<br/> <br/>
<lable>
Decimal places = 2:
<input
type="text"
name="input2"
decimal-places="2"
ng-model="model.input2"
autocomplete="off"
required>
</lable>
<br/> <br/>
<lable>
Decimal places = 2, min = 100, max = 10000:
<input
type="text"
name="input3"
decimal-places="2"
min="100"
max="10000"
ng-model="model.input3"
autocomplete="off"
required>
</lable>
</form>