如何复用JQuery/JS脚本为多JobNumber字段添加验证与弹窗功能

核心思路 #

通过批量选择器匹配所有工单输入框，复用原有事件绑定逻辑，通过输入框ID的后缀关联对应的验证消息元素，避免重复编写代码。

1. 调整CSHTML字段结构 #

确保新增的JobNumber2~JobNumber5字段与原字段结构一致，验证消息元素的ID遵循jobNumberValidationMessage+后缀的规则（无后缀对应原字段）：

<!-- 工单编号1 -->
<div class="mb-3">
    <label for="JobNumber" class="form-label">工单编号1</label>
    <input type="text" class="form-control" id="JobNumber" name="JobNumber">
    <span id="jobNumberValidationMessage" class="text-danger"></span>
</div>

<!-- 工单编号2 -->
<div class="mb-3">
    <label for="JobNumber2" class="form-label">工单编号2</label>
    <input type="text" class="form-control" id="JobNumber2" name="JobNumber2">
    <span id="jobNumberValidationMessage2" class="text-danger"></span>
</div>

<!-- 工单编号3/4/5 依此类推 -->
<div class="mb-3">
    <label for="JobNumber3" class="form-label">工单编号3</label>
    <input type="text" class="form-control" id="JobNumber3" name="JobNumber3">
    <span id="jobNumberValidationMessage3" class="text-danger"></span>
</div>

2. 复用脚本逻辑（关键实现） #

以下脚本会自动绑定所有以JobNumber开头的输入框，实现F3弹窗和数据库验证功能，并自动关联对应的验证消息：

document.addEventListener('DOMContentLoaded', function() {
    // 批量获取所有工单输入框
    const jobInputs = document.querySelectorAll('input[id^="JobNumber"]');

    jobInputs.forEach(input => {
        // 绑定F3弹窗事件
        input.addEventListener('keydown', function(e) {
            if (e.keyCode === 114) { // F3键的keyCode
                e.preventDefault();
                // 记录当前激活的输入框，用于后续回填
                window.activeJobInput = this;
                // 弹出Bootstrap模态框（假设模态框ID为jobSelectModal）
                const modal = new bootstrap.Modal(document.getElementById('jobSelectModal'));
                modal.show();
            }
        });

        // 绑定失去焦点的验证事件
        input.addEventListener('blur', function() {
            const jobNum = this.value.trim();
            if (!jobNum) return;

            // 提取输入框ID的后缀（如JobNumber2的后缀是"2"）
            const inputId = this.id;
            const suffix = inputId.replace('JobNumber', '');
            // 匹配对应的验证消息元素
            const msgElementId = suffix ? `jobNumberValidationMessage${suffix}` : 'jobNumberValidationMessage';
            const msgElement = document.getElementById(msgElementId);

            // 复用原有AJAX验证逻辑
            fetch(`/YourController/ValidateJobNumber?jobNumber=${encodeURIComponent(jobNum)}`)
                .then(res => res.json())
                .then(data => {
                    if (data.isValid) {
                        msgElement.textContent = '';
                        msgElement.classList.remove('text-danger');
                    } else {
                        msgElement.textContent = '工单编号不存在';
                        msgElement.classList.add('text-danger');
                    }
                })
                .catch(() => {
                    msgElement.textContent = '验证失败，请重试';
                    msgElement.classList.add('text-danger');
                });
        });
    });

    // 模态框选择工单后的回填逻辑（假设选择按钮带有data-job-number属性）
    document.querySelectorAll('.select-job-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const selectedJob = this.getAttribute('data-job-number');
            if (window.activeJobInput) {
                window.activeJobInput.value = selectedJob;
                // 自动触发验证
                window.activeJobInput.dispatchEvent(new Event('blur'));
            }
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('jobSelectModal'));
            modal.hide();
        });
    });
});

3. 后端验证接口（ASP.NET Core） #

确保后端接口可以接收工单编号并返回验证结果：

public IActionResult ValidateJobNumber(string jobNumber)
{
    // 替换为你的数据库验证逻辑
    bool isExists = _yourJobRepository.CheckJobExists(jobNumber);
    return Json(new { isValid = isExists });
}

关键细节说明 #

• 批量选择器：input[id^="JobNumber"]会匹配所有ID以JobNumber开头的输入框，无需逐个绑定。
• 验证消息关联：通过replace('JobNumber', '')提取输入框ID的后缀，拼接出对应验证消息元素的ID，实现一一对应。
• 弹窗回填：用window.activeJobInput临时存储当前触发F3的输入框，解决模态框无法直接关联触发源的问题。

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