如何阻止HTML的input type number接受e格式（科学计数法）数值？

你遇到的问题主要有三个核心点，咱们逐个拆解解决：

1. 正则表达式完全写反了 #

你的正则^[0-9^e]*$逻辑完全错误：字符集[0-9^e]表示允许数字、^和e这三类字符，这和你想要禁止e的需求正好相反！而且*表示允许空输入，如果你要限制输入非负整数，正确的正则应该是：

• 不允许空值（必须输入数字）：/^[0-9]+$/
• 允许空值（可以不输入，但输入只能是数字）：/^[0-9]*$/

建议直接使用正则表达式对象（而非字符串），避免Angular解析字符串时的转义问题：

$scope.regexInteger = /^[0-9]+$/; // 非空非负整数

2. ng-messages的绑定目标错误 #

你当前的ng-messages绑定的是控件本身<div ng-messages='intVal' >，但正确的做法应该绑定到控件的$error对象，这样才能触发对应的错误提示：

<div ng-messages="intVal.$error">
  <div ng-message="pattern">Invalid Integer</div>
</div>

3. input type="number"的浏览器默认行为 #

即使修正了正则和ng-messages，浏览器默认允许e、E、+、-这些科学计数法相关字符输入——因为它们属于合法的数字格式。要彻底禁止这类输入，你可以添加一个自定义指令来拦截这些按键：

自定义指令代码 #

angular.module('yourAppName').directive('noScientificNotation', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.on('keydown', function(event) {
        // 禁止输入科学计数法相关字符
        const forbiddenKeys = ['e', 'E', '+', '-'];
        if (forbiddenKeys.includes(event.key)) {
          event.preventDefault();
        }
      });
    }
  };
});

在input上使用指令 #

<input type="number" maxlength="20" class="w3-input w3-border w3-round-large"
       ng-pattern="regexInteger" name="intVal"
       no-scientific-notation />

这样组合起来，就能同时实现：禁止输入科学计数法字符、验证输入为整数、正确显示错误提示的效果了。

内容的提问来源于stack exchange，提问作者Tarun