angularjs指令仅接受给定范围内的输入数字

时间:2017-08-03 05:48:02

标签: javascript angularjs

您好我正在开发angularjs中的Web应用程序。我要求验证文本框。它应该只接受最多10位数的数字。我有指令但是当前指令不应该限制输入的数字位数。

<plugin>
  <groupId>org.codehaus.mojo</groupId>
  <artifactId>aspectj-maven-plugin</artifactId>
  <version>1.4</version>
  <configuration>
      <complianceLevel>1.6</complianceLevel>
      <encoding>${project.build.sourceEncoding}</encoding>
      <showWeaveInfo>true</showWeaveInfo>
      <source>1.7</source>
      <target>1.7</target>
      <verbose>true</verbose>
      <aspectLibraries>
          <aspectLibrary>
              <groupId>com.jcabi</groupId>
              <artifactId>jcabi-aspects</artifactId>
          </aspectLibrary>
      </aspectLibraries>
  </configuration>
  <executions>
      <execution>
          <id>weave-classes</id>
          <phase>process-classes</phase>
          <goals>
              <goal>compile</goal>
          </goals>
      </execution>
  </executions>
</plugin>

我可以知道上述指令应该改变什么,以便它最多只能接受10位数!任何帮助,将不胜感激。谢谢。

1 个答案:

答案 0 :(得分:1)

使用以下代码并尝试。我这个代码的最初目的是将数字限制为整数。但我已经修改了一点,所以你可以使用这个

(function() {
'use strict';

angular.module('app').directive('intValidate', intValidate);

function intValidate($locale) {

    var decimalSep = $locale.NUMBER_FORMATS.DECIMAL_SEP;
    var toNumberRegex = new RegExp('[^0-9\\' + decimalSep + ']', 'g');



    function toNumber(currencyStr) {
        return parseFloat(currencyStr.toString().replace(toNumberRegex, ''), 10);
    }

    return {
        restrict : 'A',
        require : 'ngModel',
        link : function validate(scope, elem, attrs, modelCtrl) {

            modelCtrl.$parsers.push(function(newViewValue) {
                var modelValue = toNumber(newViewValue);

                var valid = modelValue <= 9999999999;

                modelCtrl.$setValidity('limitcheck', valid);

                return valid ? newViewValue : undefined;
            });
        }
    };
}

})();

并使用,

<input type="text" id="value" name="value" int-validate>

如果您需要错误消息

<p class="help-block" ng-if="cacc.form.value.$error.limitcheck">Max 10 digits allowed</p>