如何在Angular中设置验证规则，限制输入为0-130的数字

直接上可运行的完整代码，新手复制就能用，之后再拆解开讲每个部分：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 错误提示默认隐藏 */
        .error {
            display: none;
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        /* 输入框验证失败时的样式 */
        .age-input.invalid {
            border-color: #dc3545;
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }
        /* 显示错误提示 */
        .age-input.invalid + .error {
            display: block;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="ageInput">年龄（0-130）：</label>
        <input 
            type="text" 
            id="ageInput" 
            class="age-input" 
            placeholder="请输入数字"
            required
        >
        <span class="error">请输入0到130之间的有效数字，不能输入字母或其他字符</span>
        <button type="submit">提交</button>
    </form>

    <script>
        const input = document.getElementById('ageInput');
        const form = document.getElementById('myForm');
        // 匹配0-130数字的正则表达式
        const numberPattern = /^([0-9]|[1-9][0-9]|1[0-2][0-9]|130)$/;

        // 实时验证输入
        input.addEventListener('input', function() {
            if (this.value === '') {
                // 空值时移除错误状态
                this.classList.remove('invalid');
                return;
            }
            // 验证输入是否符合规则
            if (!numberPattern.test(this.value)) {
                this.classList.add('invalid');
            } else {
                this.classList.remove('invalid');
            }
        });

        // 提交表单时再次验证
        form.addEventListener('submit', function(e) {
            if (!numberPattern.test(input.value)) {
                input.classList.add('invalid');
                e.preventDefault(); // 阻止表单提交
            }
        });
    </script>
</body>
</html>

各部分说明： #

1. HTML结构

   • 输入框用type="text"是为了更好地配合正则验证（如果用type="number"，浏览器会自带上下箭头，但输入字母时会自动清空，体验不如text直观）
   • required属性确保输入框不能为空
   • 后面的<span>是错误提示，默认隐藏

2. 正则表达式解释
   代码里的/^([0-9]|[1-9][0-9]|1[0-2][0-9]|130)$/分四部分：

   • [0-9]：匹配0-9的单个数字
   • [1-9][0-9]：匹配10-99的两位数（第一位不能是0）
   • 1[0-2][0-9]：匹配100-129的三位数
   • 130：精确匹配130这个数值

3. CSS样式

   • 错误提示默认display: none，只有当输入框有invalid类时才显示
   • 输入框错误时，边框变红并加阴影，一眼就能看出问题

4. JS逻辑

   • 监听input事件，用户每输入一个字符就实时验证，立刻反馈错误状态
   • 监听表单submit事件，防止不符合规则的内容提交
   • 空值时自动移除错误状态，避免空输入时就变红

这样设置后，用户输入字母、负数、大于130的数字，输入框都会立刻变红并显示错误提示，输入符合要求的数字就恢复正常。

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