如何用正则表达式验证输入是否为数字？员工ID验证问题排查

问题分析 #

你的代码存在两个核心问题导致无法正确拦截非数字ID输入：

• 代码结构错误：if-else判断块后多了一个多余的闭合大括号，导致后续的记录保存逻辑永远无法执行
• 对于<input type="number">的value处理不严谨：当输入非数字内容时，输入框的value会返回空字符串，原逻辑会直接进入生成随机ID的分支，跳过正则验证

修正后的完整代码 #

HTML部分

<!-- HTML code-->
<aside>
    <div>
        <div>
            <h3>Add or Update User Information</h3>
            <div>
                <label>ID No.</label>
                <input type="number" id="idNum">
            </div>
            <div>
                <label>First Name</label>
                <input type="text" id="firstName">
            </div>
            <div>
                <label>Last Name</label>
                <input type="text" id="lastName">
            </div>
            <div>
                <label>Age</label>
                <input type="number" id="age">
            </div>
            <div>
                <label>Department</label>
                <input type="text" id="department">
            </div>
            <div>
                <label>Job Role</label>
                <input type="text" id="jobRole">
            </div>
            <div>
                <label>Level</label>
                <input type="text" id="level">
            </div>
            <div>
                <button onclick="userRecords();">Submit</button>
            </div>
        </div>
    </div>
</aside>

<section>
    <h3>Result Below</h3>
    <pre id="demo"></pre>
</section>

JavaScript部分

// Javascript Code
const recordCollection = {};

function userRecords() {
    let idNum = document.getElementById('idNum').value.trim();
    let firstName = document.getElementById('firstName').value.trim();
    let lastName = document.getElementById('lastName').value.trim();
    let age = document.getElementById('age').value.trim();
    let department = document.getElementById('department').value.trim();
    let role = document.getElementById('jobRole').value.trim();
    let level = document.getElementById('level').value.trim();
    let demo = document.getElementById('demo');
    const regex = /^[0-9]{4}$/;

    // 处理ID逻辑
    if (idNum === "") {
        // 生成4位随机ID
        idNum = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
        idNum = idNum.toString();
    } else {
        // 验证ID是否为4位数字
        if (!regex.test(idNum)) {
            alert("ID must be a Number");
            return false;
        }
    }

    // 创建或更新员工记录（以ID为键存储）
    recordCollection[idNum] = {
        "First Name": firstName,
        "Last Name": lastName,
        "age": age,
        "department": department,
        "Job Role": role,
        "Level": level
    };

    demo.innerHTML = JSON.stringify(recordCollection, null, 2);
    return true;
}

关键修改说明 #

1. 修复代码结构：移除了if-else块后多余的闭合大括号，确保记录保存逻辑能正常执行
2. 优化ID验证逻辑：
   • 使用regex.test()替代match()，验证效率更高且返回布尔值更直观
   • 正则改为/^[0-9]{4}$/，同时验证数字和长度，简化判断逻辑
   • 对输入值做trim()处理，避免空格干扰验证
3. 完善记录存储逻辑：将员工数据以ID为键存储在recordCollection中，实现真正的多员工新增和更新功能，而不是覆盖同一个对象
4. 处理随机ID的类型：生成随机ID后转为字符串，保证与手动输入的ID类型一致，避免存储混乱

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