如何通过AngularJS限制HTML文本框仅接受指定pattern的算术表达式

针对输入框仅允许输入A1-A5运算数、+ - * /算术运算符，且满足A1+A2*A3类交替格式的需求，在AngularJS 1.x框架下可通过「实时输入拦截+表单合法性校验」双层逻辑实现，具体代码如下：

核心实现逻辑 #

• 输入拦截层：监听键盘输入、粘贴事件，对即将写入输入框的内容做预校验，非法内容直接阻止写入，从源头过滤无效输入
• 表单校验层：挂载到AngularJS的ngModel校验链路，覆盖自动填充、脚本赋值等绕过输入拦截的场景，确保提交值完全符合规则

自定义指令代码 #

在模块中注册可复用的formulaInput指令：

angular.module('yourAppModule')
.directive('formulaInput', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      // 放行的功能按键：退格、Tab、左右方向键、删除
      const allowSpecialKeys = [8, 9, 37, 39, 46];
      // 合法运算数白名单
      const validOperands = ['A1', 'A2', 'A3', 'A4', 'A5'];
      // 合法运算符白名单
      const validOperators = ['+', '-', '*', '/'];

      // 核心校验方法
      const checkValid = function(inputStr) {
        // 空值默认放行
        if (!inputStr) return true;
        // 第一步：过滤所有不在白名单内的字符，仅允许A、1-5、四个运算符
        if (/[^A1-5+\-*/]/.test(inputStr)) return false;
        // 第二步：校验结构，必须为「运算数+运算符+运算数」交替排列
        const tokenList = inputStr.split(/([+\-*/])/);
        for (let i = 0; i < tokenList.length; i++) {
          const token = tokenList[i];
          if (i % 2 === 0) {
            // 偶数位必须是合法运算数，空串代表首尾/连续运算符
            if (!token || validOperands.indexOf(token) === -1) return false;
          } else {
            // 奇数位必须是合法运算符
            if (validOperators.indexOf(token) === -1) return false;
          }
        }
        return true;
      };

      // 监听键盘输入
      elem.on('keydown', function(e) {
        const keyCode = e.keyCode;
        // 功能键直接放行
        if (allowSpecialKeys.indexOf(keyCode) !== -1) return;
        const inputChar = String.fromCharCode(keyCode);
        const curVal = elem.val() || '';
        const cursorPos = elem[0].selectionStart;
        const targetVal = curVal.slice(0, cursorPos) + inputChar + curVal.slice(cursorPos);
        // 非法输入直接阻止
        if (!checkValid(targetVal)) e.preventDefault();
      });

      // 监听粘贴事件
      elem.on('paste', function(e) {
        const pasteContent = e.clipboardData.getData('text');
        const curVal = elem.val() || '';
        const cursorPos = elem[0].selectionStart;
        const targetVal = curVal.slice(0, cursorPos) + pasteContent + curVal.slice(cursorPos);
        if (!checkValid(targetVal)) e.preventDefault();
      });

      // 挂载ngModel校验器，同步表单校验状态
      ngModel.$validators.formulaLegal = function(modelVal, viewVal) {
        return checkValid(modelVal || viewVal);
      };
    }
  };
});

页面使用方式 #

在对应输入框上直接挂载指令即可，配合表单状态做错误提示和提交控制：

<form name="calcForm">
  <input
    type="text"
    name="formula"
    ng-model="userInput.formula"
    formula-input
    placeholder="例如A1+A2*A3"
  >
  <!-- 非法状态提示 -->
  <div ng-if="calcForm.formula.$error.formulaLegal" style="color: red; font-size: 12px;">
    * 仅支持输入A1-A5与+、-、*、/，格式需为运算数和运算符交替，不可连续输入运算符/运算数
  </div>
  <!-- 表单非法时禁用提交 -->
  <button type="submit" ng-disabled="calcForm.$invalid">提交计算</button>
</form>

补充说明 #

• 该实现会自动拦截：非法字符输入、A0/A6等非白名单运算数、连续运算符/运算数、运算符放在开头/结尾等不符合要求的输入
• 如果后续需要支持括号运算，可在白名单中补充括号字符，额外增加括号配对校验逻辑即可
• 所有输入场景（键盘敲入、粘贴、拖拽填入）都会走全量校验，不会出现漏拦截的情况

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