模态框内JS输入验证函数仅首行生效问题求助

你踩了一个很常见的DOM坑：重复使用了全局唯一的ID属性。

看你的代码，在循环生成每一行的模态框时，每个模态框里的输入框（比如#username、#password）和提示框（比如#popover-username）都用了相同的ID。但HTML规范里ID必须是全局唯一的，JavaScript通过$('#username')选择元素时，只会找到DOM中第一个匹配这个ID的元素——这就是为什么只有第一行的编辑模态框能触发验证，后面的完全失效。

解决方案步骤 #

1. 去掉重复ID，统一改用类名 #

先把模态框里所有重复的ID替换成类名，比如：

<!-- 原用户名输入框 -->
<input type="text" id="username" name="username" class="username form-control" ...>
<!-- 修改后（去掉ID，保留类名） -->
<input type="text" name="username" class="username form-control" ...>

<!-- 原提示框 -->
<span id="popover-username" class="pun hide pull-right block-help">...</span>
<!-- 修改后 -->
<span class="popover-username pun hide pull-right block-help">...</span>

同理，#password、#confirm_password、#contact_number以及对应的提示框都要改成类名，比如password、confirm_password、popover-cpassword等。

2. 用事件委托重构验证代码 #

直接绑定到类名的事件对动态生成的元素无效，所以要改用事件委托——把事件绑定到一个静态父元素（比如document或者模态框的容器），然后监听子元素的事件。这样不管生成多少模态框，事件都能生效。

修改后的JavaScript代码示例：

<script>
$(document).ready(function() {
    // 用户名验证：监听所有.username输入框的blur事件
    $(document).on('blur', '.username', function() {
        const $input = $(this);
        // 找到当前输入框对应的提示框
        const $popover = $input.siblings('.popover-username');
        const regex = /\`|\~|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\+|\=|\[|\{|\]|\}|\||\\|\'|\<|\,|\.|\>|\?|\/|\"|\;|\:|\s/;
        
        if ($input.val().match(regex)) {
            $popover.removeClass('hide');
            // 找到当前表单内的提交按钮
            $input.closest('form').find('.submit-btn').attr('disabled', 'disabled');
        } else {
            $popover.addClass('hide');
            $input.closest('form').find('.submit-btn').removeAttr('disabled');
        }
    });

    // 密码确认验证
    $(document).on('blur', '.confirm_password', function() {
        const $confirmInput = $(this);
        const $passwordInput = $confirmInput.closest('form').find('.password');
        const $popover = $confirmInput.siblings('.popover-cpassword');
        const $submitBtn = $confirmInput.closest('form').find('.submit-btn');
        
        if ($passwordInput.val() !== $confirmInput.val()) {
            $popover.removeClass('hide');
            $submitBtn.attr('disabled', 'disabled');
        } else {
            $popover.addClass('hide');
            $submitBtn.removeAttr('disabled');
        }
    });

    // 联系电话验证
    $(document).on('blur', '.contact_number', function() {
        const $input = $(this);
        const $popover = $input.siblings('.popover-cnumber');
        const $submitBtn = $input.closest('form').find('.submit-btn');
        const regex = /^[(9)][(\d+)]{9}$/;
        
        if ($input.val().match(regex)) {
            $popover.addClass('hide');
            $submitBtn.removeAttr('disabled');
        } else {
            $popover.removeClass('hide');
            $submitBtn.attr('disabled', 'disabled');
        }
    });

    // 密码强度验证
    $(document).on('keyup', '.password', function() {
        const $input = $(this);
        const password = $input.val();
        const $submitBtn = $input.closest('form').find('.submit-btn');
        
        if (checkStrength(password) === false) {
            $submitBtn.attr('disabled', 'disabled');
        } else {
            $submitBtn.removeAttr('disabled');
        }
    });
});
</script>

3. 把提交按钮也改成类名 #

你原来的提交按钮用了#submit，同样会重复，改成类名：

<!-- 模态框内的提交按钮 -->
<button type="submit" class="submit-btn btn btn-primary">Submit</button>

额外小建议 #

• 事件委托可以尽量缩小范围，比如绑定到.modal容器而不是document，性能更好：

  $('.modal').on('blur', '.username', function() { ... });
  

• 不需要再用shown.bs.modal事件重新绑定了，事件委托已经完美解决动态元素的问题。

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