Javascript 只允许在文本框中输入范围内的数字_Javascript_Html_Angularjs

Javascript 只允许在文本框中输入范围内的数字

javascript html angularjs

Javascript 只允许在文本框中输入范围内的数字,javascript,html,angularjs,Javascript,Html,Angularjs,我正在尝试创建只接受特定范围内的数字的输入文本指令。我尝试将该值解析为整数，当然min和max都不起作用我不想使用输入[type=“number”]。最后，我尝试创建一个与出生日期无关的输入文本字段。如下图所示：我修改的指令[我目前正在尝试使用]-可以找到原件@ 解决这个问题后，我希望做的是执行一个有条件的ng show，显示span元素的错误-当用户键入的值超过31（天）12（月）等等我欢迎任何建议谢谢。我也有同样的问题。我尝试了“一切”，使它既方便用户，又不接受无效值。最后，

我正在尝试创建只接受特定范围内的数字的输入文本指令。我尝试将该值解析为整数，当然

min

和

max

都不起作用

我不想使用输入[type=“number”]。
最后，我尝试创建一个与出生日期无关的输入文本字段。如下图所示：

我修改的指令[我目前正在尝试使用]-可以找到原件@

解决这个问题后，我希望做的是执行一个有条件的

ng show

，显示span元素的错误-当用户键入的值超过31（天）12（月）等等

我欢迎任何建议

谢谢。

我也有同样的问题。我尝试了“一切”，使它既方便用户，又不接受无效值。最后，我放弃了看似简单的解决方案，比如

ng模式

，在朋友@Teemu Turkia的帮助下，我们提出了

仅整数

指令

它使用

type=“text”

，同时支持

min

和

max

，不接受数字以外的字符和要键入的

（最小值为负数时作为第一个字符）

此外，

ng model

从未分配无效值，例如空字符串或

NaN

，仅分配给定范围或

null

之间的值

我知道，一开始看起来很吓人；）

HTML

// note: uses underscore.js
<body>
  <form name="form">
    <header>DD / MM / YYYY</header>
    <section>
      <input type="text" 
             name="day" 
             ng-model="day" 
             min="1" 
             max="31" 
             integers-only>
      <input type="text" 
             name="month" 
             ng-model="month" 
             min="1" 
             max="12" 
             integers-only>
      <input type="text" 
             name="year" 
             ng-model="year" 
             min="1900" 
             max="2016" 
             integers-only> 
    </section>
    <section>
      <span ng-show="form.day.$invalid">Invalid day</span>
      <span ng-show="form.month.$invalid">Invalid month</span>
      <span ng-show="form.year.$invalid">Invalid year</span>
    </section>
  </form> 
</body>

//注意：使用下划线.js
年月日
无效日
无效月份
无效年份

JavaScript

/**
 * numeric input
 * <input type="text" name="name" ng-model="model" min="0" max="100" integers-only>
 */
angular.module('app', [])
.directive('integersOnly', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
        min: '=',
        max: '='
    },
    link: function(scope, element, attrs, modelCtrl) {
      function isInvalid(value) {
        return (value === null || typeof value === 'undefined' || !value.length);
      }

      function replace(value) {
        if (isInvalid(value)) {
          return null;
        }

        var newValue = [];
        var chrs = value.split('');
        var allowedChars = ['0','1','2','3','4','5','6','7','8','9','-'];

        for (var index = 0; index < chrs.length; index++) {
          if (_.contains(allowedChars, chrs[index])) {
            if (index > 0 && chrs[index] === '-') {
              break;
            }
            newValue.push(chrs[index]);
          }
        }

        return newValue.join('') || null;
      }

      modelCtrl.$parsers.push(function(value) {
        var originalValue = value;

        value = replace(value);

        if (value !== originalValue) {
          modelCtrl.$setViewValue(value);
          modelCtrl.$render();
        }

        return value && isFinite(value) ? parseInt(value) : value;
      });

      modelCtrl.$formatters.push(function(value) {
        if (value === null || typeof value === 'undefined') {
          return null;
        }

        return parseInt(value);
      });
      modelCtrl.$validators.min = function(modelValue) {
        if (scope.min !== null && modelValue !== null && modelValue < scope.min) { return false; }
        return true;
      };
      modelCtrl.$validators.max = function(modelValue) {
        if (scope.max !== null && modelValue !== null && modelValue > scope.max) { return false; }
        return true;
      };
      modelCtrl.$validators.hasOnlyChar = function(modelValue) {
        if (!isInvalid(modelValue) && modelValue === '-') { return false; }
        return true;
      };
    }
  };
});

/**
*数字输入
* 
*/
角度.module（'app'，[]）
.directive（'integersOnly'，function（）{
返回{
限制：“A”，
要求：'ngModel'，
范围：{
最小：“=”，
最大值：'='
},
链接：函数（范围、元素、属性、模型控制）{
函数isInvalid（值）{
返回值（value==null | | typeof value===“未定义”| |！value.length）；
}
函数替换（值）{
如果（isInvalid（值））{
返回null；
}
var newValue=[]；
var chrs=分割值（“”）；
变量allowedChars=['0'、'1'、'2'、'3'、'4'、'5'、'6'、'7'、'8'、'9'、'-']；
对于（var index=0；index0&&chrs[index]=='-'）{
打破
}
push（chrs[index]）；
}
}
返回newValue.join（“”）| null；
}
modelCtrl.$parsers.push（函数（值）{
var原始价值=价值；
值=替换（值）；
如果（值！==原始值）{
modelCtrl.$setViewValue（值）；
modelCtrl.$render（）；
}
返回值&isFinite（值）？parseInt（值）：值；
});
modelCtrl.$formatters.push（函数（值）{
如果（值===null | |值的类型===‘未定义’）{
返回null；
}
返回parseInt（值）；
});
modelCtrl.$validators.min=函数（modelValue）{
如果（scope.min！==null&&modelValue！==null&&modelValuescope.max）{return false；}
返回true；
};
modelCtrl.$validators.hasOnlyChar=函数（modelValue）{
如果（！isInvalid（modelValue）&&modelValue=='-'）{return false；}
返回true；
};
}
};
});

结果

/**
 * numeric input
 * <input type="text" name="name" ng-model="model" min="0" max="100" integers-only>
 */
angular.module('app', [])
.directive('integersOnly', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
        min: '=',
        max: '='
    },
    link: function(scope, element, attrs, modelCtrl) {
      function isInvalid(value) {
        return (value === null || typeof value === 'undefined' || !value.length);
      }

      function replace(value) {
        if (isInvalid(value)) {
          return null;
        }

        var newValue = [];
        var chrs = value.split('');
        var allowedChars = ['0','1','2','3','4','5','6','7','8','9','-'];

        for (var index = 0; index < chrs.length; index++) {
          if (_.contains(allowedChars, chrs[index])) {
            if (index > 0 && chrs[index] === '-') {
              break;
            }
            newValue.push(chrs[index]);
          }
        }

        return newValue.join('') || null;
      }

      modelCtrl.$parsers.push(function(value) {
        var originalValue = value;

        value = replace(value);

        if (value !== originalValue) {
          modelCtrl.$setViewValue(value);
          modelCtrl.$render();
        }

        return value && isFinite(value) ? parseInt(value) : value;
      });

      modelCtrl.$formatters.push(function(value) {
        if (value === null || typeof value === 'undefined') {
          return null;
        }

        return parseInt(value);
      });
      modelCtrl.$validators.min = function(modelValue) {
        if (scope.min !== null && modelValue !== null && modelValue < scope.min) { return false; }
        return true;
      };
      modelCtrl.$validators.max = function(modelValue) {
        if (scope.max !== null && modelValue !== null && modelValue > scope.max) { return false; }
        return true;
      };
      modelCtrl.$validators.hasOnlyChar = function(modelValue) {
        if (!isInvalid(modelValue) && modelValue === '-') { return false; }
        return true;
      };
    }
  };
});

此解决方案使用min和max属性来限制输入字段的值。它还使用ngModelOptions仅在定义的时间间隔后更新模型值。这是为了允许用户在模型解析器对输入进行操作之前键入值

angular.module（“app”，[]）；
angular.module（“app”）.directive（'onlyDigits'，function（）{
返回{
限制：“A”，
要求：“？ngModel”，
范围：{
最小：“@”，
马克斯：“@”
},
链接：函数（范围、元素、属性、模型控制）{
modelCtrl.$parsers.push（函数（inputValue）{
if（inputValue==未定义）返回“”；
var transformedInput=inputValue.replace（/[^0-9]/g'，）；
var theInt=parseInt（transformedInput）；
var max=scope.max；
var min=scope.min；
如果（输入>最大值）{
theInt=最大值；
}否则，如果（输入<最小值）{
nt=min；
}
modelCtrl.$setViewValue（theInt.toString（））；
modelCtrl.$render（）；
回信；
});
}
}
});
这是一个没有任何自定义指令的解决方案。它仍然是input type=“number”
，但实现了所需的功能
这是


出生日期表格
DD
嗯
YYYY

日期必须在1到31之间！


月份必须在1到12之间！


年份必须在1900到2016之间！

var-app=angular.module（'app'，[]）；
app.controller（'dobController'，function（$scope）{}）；
输入[类型=编号]：-webkit内部旋转按钮，
输入[type=number]：-webkit外部旋转按钮{
-webkit外观：无；