如何使用JavaScript实现表单验证？

要实现表单的必填项验证，核心是在表单提交前检查输入字段是否包含有效内容，具体实现步骤和代码如下：

实现步骤 #

• 监听表单的submit事件，用event.preventDefault()阻止表单默认提交行为，确保先完成验证再处理后续逻辑
• 收集需要验证的所有输入元素，统一管理
• 对每个输入字段使用trim()去除首尾空格后，判断是否存在有效内容
• 若所有必填项验证通过，再执行业务逻辑（比如发送请求、页面跳转）

完整代码示例 #

form.addEventListener('submit', (event) => {
    // 阻止表单默认提交行为，避免页面刷新
    event.preventDefault()
    // 存储需要验证的输入元素
    const inputs = [nameinput, desc, number];
    // 检查所有必填项是否都填写了有效内容
    const allFieldsFilled = inputs.every(input => input.value.trim())
    
    if (allFieldsFilled) {
        // 构建要提交的数据对象
        let submitData = {
            name: nameinput.value,
            desc: desc.value,
            price: number.value
        }
        // 发送POST请求提交数据
        axios.post("http://localhost:3000/Pulse", submitData)
        .then(res => {
            // 请求成功后跳转页面
            window.location = "./index.html"
        })
    } else {
        // 可选：给用户提示未填写完整
        alert('请填写所有必填字段')
    }
})

关键细节说明 #

• trim()：去除输入内容的首尾空格，避免用户仅输入空格就通过验证的情况
• every()方法：遍历输入数组，只要有一个字段不满足非空条件就返回false，简化多字段验证逻辑
• 验证不通过时可添加提示逻辑（如弹窗或页面内的错误提示），提升用户体验

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