如何实现接受字母数字且禁止纯数字的输入框提交校验？

1. 调整HTML结构 #

先给输入框添加基础限制属性，同时新增错误提示容器：

<input id="address1" class="work" pattern="[A-Za-z0-9]+" title="仅允许字母和数字，且不能为纯数字" required />Address1
<input id="address2" class="work" pattern="[A-Za-z0-9]+" title="仅允许字母和数字，且不能为纯数字" required />Address2
<input style="float: right; margin-bottom:20px" type="submit" id="myBtn" value="Submit" class="btn btn-primary" />
<!-- 错误提示区域 -->
<div id="errorTip" style="color: #dc3545; display: none; margin-top: 12px;"></div>

2. 编写提交验证逻辑 #

通过JavaScript监听按钮点击，完成双重验证：

document.getElementById('myBtn').addEventListener('click', function(e) {
    e.preventDefault(); // 先阻止默认提交行为
    const errorTip = document.getElementById('errorTip');
    errorTip.style.display = 'none';
    errorTip.textContent = '';
    
    const inputs = document.querySelectorAll('.work');
    let isFormValid = true;

    inputs.forEach(input => {
        const inputVal = input.value.trim();
        
        // 验证1：是否为纯数字
        if (/^\d+$/.test(inputVal)) {
            isFormValid = false;
            errorTip.textContent = '输入内容不能为纯数字，请至少包含一个字母';
            errorTip.style.display = 'block';
            input.focus();
            return;
        }
        // 验证2：是否仅包含字母数字
        if (!/^[A-Za-z0-9]+$/.test(inputVal)) {
            isFormValid = false;
            errorTip.textContent = '输入内容仅允许字母和数字';
            errorTip.style.display = 'block';
            input.focus();
            return;
        }
    });

    if (isFormValid) {
        // 验证通过，执行实际提交逻辑
        // 比如：document.querySelector('form').submit();
        alert('验证通过，表单即将提交');
    }
});

验证说明 #

• HTML的pattern属性做前端初步拦截，阻止非字母数字输入的即时反馈
• JavaScript的/^\d+$/正则精准检测纯数字内容，/^[A-Za-z0-9]+$/确保输入无特殊字符
• 错误提示会自动定位到出错输入框，优化用户纠错体验

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