HTML如何实现表单所有输入项填写完成后才触发页面跳转

需求为表单所有输入项填写完成后，才允许提交跳转到home.php，当前代码点击提交按钮会直接跳转，无法拦截空值提交。

当前存在问题的原始代码：

<form action="home.php" method="post">
    <div>
        <input type=text name="username">
        <label>Email or phone number</label>
    </div>
    <div>
        <input type=text name="username">
        <label>Phone</label>
    </div>      
    <button type=submit name="submit">Sign In</button>
</form>

• 未给输入项配置必填校验规则，表单默认提交逻辑不会自动拦截空内容
• 两个输入框name属性重复，后端接收参数时会出现值覆盖问题
• 输入框未配置匹配的type属性，无法触发浏览器原生的格式校验

方案1：HTML原生属性实现（无需编写JavaScript） #

直接给需要必填的输入框添加required属性，浏览器会自动拦截空值提交，同时修正重复的name值、匹配对应输入类型，代码如下：

<form action="home.php" method="post">
    <div>
        <input type="email" name="account" required>
        <label>Email or phone number</label>
    </div>
    <div>
        <input type="tel" name="phone" required>
        <label>Phone</label>
    </div>      
    <button type="submit" name="submit">Sign In</button>
</form>

该方案实现成本最低，但提示文案、样式由浏览器控制，无法自定义，适合对交互要求不高的场景。

方案2：JavaScript自定义校验（支持自定义交互） #

通过监听表单提交事件，手动遍历校验所有输入项，存在未填内容时阻止默认跳转，校验通过后再放行提交，支持自定义错误提示、样式，代码如下：

<form action="home.php" method="post" id="signForm">
    <div>
        <input type="text" name="account" class="form-item">
        <label>Email or phone number</label>
    </div>
    <div>
        <input type="text" name="phone" class="form-item">
        <label>Phone</label>
    </div>      
    <button type="submit" name="submit">Sign In</button>
</form>

<script>
const signForm = document.getElementById('signForm')
const formItems = document.querySelectorAll('.form-item')

signForm.addEventListener('submit', function(e) {
    let valid = true
    formItems.forEach(item => {
        if (!item.value.trim()) {
            valid = false
            // 可自定义错误样式，比如加红边框
            item.style.borderColor = '#ff4d4f'
        } else {
            item.style.borderColor = ''
        }
    })
    // 校验不通过时阻止默认提交跳转
    if (!valid) {
        e.preventDefault()
        alert('请完成所有必填项填写后再提交')
    }
})
</script>

• 前端校验仅用于提升用户体验，必须在后端home.php中增加二次参数校验，防止用户绕过前端直接发起请求
• 同一表单内不要出现重复的name属性，避免后端接收参数异常
• 建议根据输入内容类型配置对应的type值，比如邮箱用type="email"、手机号用type="tel"，移动端会自动匹配输入键盘，降低用户输入成本

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