点击提交按钮验证手机号输入长度的jQuery实现问题

需求说明 #

点击提交按钮时验证所有手机号输入框：

• 去除输入内容中的非数字字符
• 若处理后长度小于10位，在对应输入框下方的.error容器中显示提示：this field should be 10 characters long
• 符合要求则清空错误提示

现有代码问题 #

你把验证逻辑写在了$(document).ready()回调里，这个回调仅在页面加载完成时执行一次，不会响应提交按钮的点击事件；同时此时e.target并非目标输入框，导致验证逻辑完全无法触发。

修复后的代码 #

HTML（保持原结构不变） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<input id="phone1" class="phone" placeholder="(___) ___-____"/>
<div class="error"></div>
<input id="phone2" class="phone" placeholder="(___) ___-____"/>
<div class="error"></div>
<input id="phone3" class="phone" placeholder="(___) ___-____"/>
<div class="error"></div>

<input style="float: right; margin-bottom:20px" type="submit" id="myBtn1" value="Submit" class="btn btn-primary"  />

jQuery 验证代码 #

$(document).ready(function(){
    // 给提交按钮绑定点击事件
    $('#myBtn1').click(function(e){
        // 阻止默认提交行为，避免页面刷新丢失提示
        e.preventDefault();
        
        // 遍历所有手机号输入框，逐个验证
        $('.phone').each(function(){
            // 过滤非数字字符
            let cleanValue = $(this).val().replace(/\D/g, '');
            // 获取当前输入框对应的错误提示容器
            let errorBox = $(this).next('.error');
            
            if(cleanValue.length < 10){
                errorBox.text('this field should be 10 characters long');
            } else {
                errorBox.text('');
            }
        });
    });
});

核心修复点 #

• 将验证逻辑绑定到提交按钮的点击事件，确保点击时触发验证
• 用$('.phone').each()遍历所有手机号输入框，实现批量验证
• 通过$(this)精准定位当前输入框及其对应的错误提示容器
• 添加e.preventDefault()阻止页面默认提交行为，保留错误提示状态

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