我正在对输入类型进行一些验证。

<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>

10-05 20:55
查看更多