javascript - 提交前验证输入类型 ="number"

标签 javascript angularjs

我在尝试将用户输入限制为数字时遇到了一个有趣的问题。

我的 HTML 看起来像这样:

<input name="activeDate" type="number" class="form-control" ng-model="account.tag.activeDate"></input>

...以及我的相关 Angular Controller 代码,如下所示(位于点击处理程序内部):

tag.activeDate = moment.utc().add(tag.activeDate, tag.tagDurationType).toISOString();

不幸的是,当我单击提交表单的按钮并调用单击处理程序时,我在控制台中收到此错误:

[ngModel:numfmt] Expected `2015-08-27T22:09:18.919Z` to be a number

看起来我的输入在提交时被检查,当它在我的 Controller 中转换为日期时。如何将用户输入限制为数字而不遇到这种情况?

最佳答案

使用ng-pattern="/^(\d)+$/" - 这是简单的正则表达式

var app = angular.module('num', []);

app.controller('numCtrl', function($scope, $http){
  $scope.digits = {};
});
angular.bootstrap(document.body, ['num']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="numCtrl">
    <form class="digits" name="digits" ng-submit="getGrades()" novalidate >
      <input type="text" placeholder="digits here plz" name="nums" ng-model="nums" required ng-pattern="/^(\d)+$/" />
      <p class="alert" ng-show="digits.nums.$error.pattern">Numbers only, please.</p> 
      <br>
      <input class="btn" type="submit" value="Do it!" ng-disabled="!digits.$valid" />
    </form>
  </body>

关于javascript - 提交前验证输入类型 ="number",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32255533/

相关文章:

javascript - 警告 : Can't perform a React state update on an unmounted component

javascript - Angular 1.X、webpack 和 ngtemplate 加载器问题

javascript - 在 put 方法之前从作用域获取数据

javascript - 如何使用php查找手机号码的重复条目

javascript - js获取单选标签文本

javascript - AngularJS 在不同模块之间共享 Controller 中存储的数据

javascript - 这个 redux reducer 可以吗

javascript - AngularJS - 通过在复选框中使用嵌套对象来过滤数组

javascript - 无法在 Angular $http 调用中获取由 Play 框架服务器设置的 cookie?

javascript - 从天气 API 获取数据时出错。类型错误 : cannot read property of undefined in AngularJS