浏览器只用js怎么防止提交表单

要在浏览器中只用JavaScript防止提交表单，可以通过以下几种方法：监听表单的提交事件、验证输入内容、禁用提交按钮。 其中，监听表单的提交事件是一种常见且有效的方法。通过监听提交事件，你可以在提交表单之前进行各种检查和验证，从而决定是否允许表单提交。

一、监听表单的提交事件

监听表单的提交事件是防止表单提交的核心方法。通过addEventListener方法监听表单的提交事件，可以在事件触发时执行特定的JavaScript代码。

document.querySelector('form').addEventListener('submit', function(event) {
    // 取消默认的提交行为
    event.preventDefault();
    // 执行验证逻辑
    if (validateForm()) {
        // 如果验证通过，则可以手动提交表单或执行其他操作
        // this.submit();
    }
});

在上述代码中，通过event.preventDefault()方法取消了表单的默认提交行为。接下来，可以使用validateForm()函数进行表单验证，如果验证通过，可以手动提交表单或者执行其他操作。

二、验证输入内容

验证输入内容是防止表单提交的关键步骤。通过验证用户输入的内容，可以确保提交的表单数据符合预期要求，从而避免数据错误和安全问题。

function validateForm() {
    // 获取表单元素
    var username = document.querySelector('#username').value;
    var email = document.querySelector('#email').value;
    // 验证用户名
    if (username.trim() === '') {
        alert('用户名不能为空');
        return false;
    }
    // 验证邮箱
    if (!validateEmail(email)) {
        alert('请输入有效的邮箱地址');
        return false;
    }
    // 所有验证通过
    return true;
}
function validateEmail(email) {
    var re = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/;
    return re.test(email);
}

在上述代码中，validateForm()函数负责验证表单中的用户名和邮箱。validateEmail()函数使用正则表达式验证邮箱格式。如果验证失败，函数将返回false，并通过alert方法提示用户。

三、禁用提交按钮

通过禁用提交按钮，可以在表单不符合要求时防止用户提交表单。禁用提交按钮通常与表单验证一起使用，以确保表单在验证通过之前无法提交。

document.querySelector('#submitBtn').addEventListener('click', function(event) {
    // 执行验证逻辑
    if (!validateForm()) {
        // 禁用提交按钮
        this.disabled = true;
    } else {
        // 启用提交按钮
        this.disabled = false;
    }
});

在上述代码中，通过监听提交按钮的点击事件执行表单验证。如果验证不通过，则禁用提交按钮，防止用户提交表单。

四、使用HTML5表单验证属性

HTML5引入了一些新的表单验证属性，可以在不使用JavaScript的情况下进行基本的表单验证。这些属性包括required、pattern、minlength、maxlength等。

<form id="myForm">
    <input type="text" id="username" name="username" required minlength="3" maxlength="20">
    <input type="email" id="email" name="email" required>
    <button type="submit" id="submitBtn">提交</button>
</form>

在上述HTML代码中，username输入框使用了required、minlength和maxlength属性进行验证，而email输入框使用了required属性进行验证。这些属性可以在浏览器级别进行基本的表单验证，从而防止表单提交。

五、结合JavaScript和HTML5表单验证

通过结合JavaScript和HTML5表单验证，可以实现更为灵活和强大的表单验证机制。HTML5表单验证属性可以处理简单的验证，而JavaScript可以用于复杂的自定义验证逻辑。

document.querySelector('form').addEventListener('submit', function(event) {
    // 取消默认的提交行为
    event.preventDefault();
    // 执行HTML5表单验证
    if (!this.checkValidity()) {
        alert('请填写所有必填字段');
        return;
    }
    // 执行自定义验证逻辑
    if (validateForm()) {
        // 手动提交表单
        this.submit();
    }
});

在上述代码中，首先通过checkValidity()方法执行HTML5表单验证。如果验证通过，再执行自定义的JavaScript验证逻辑。这样可以实现更为全面的表单验证机制。

六、处理异步验证

在某些情况下，表单验证可能需要与服务器进行交互，例如检查用户名是否已存在。这种情况下，可以使用异步请求进行验证。

document.querySelector('form').addEventListener('submit', function(event) {
    // 取消默认的提交行为
    event.preventDefault();
    // 执行异步验证
    asyncValidateForm().then(function(isValid) {
        if (isValid) {
            // 手动提交表单
            document.querySelector('form').submit();
        } else {
            alert('表单验证失败');
        }
    });
});
function asyncValidateForm() {
    return new Promise(function(resolve, reject) {
        // 模拟异步请求
        setTimeout(function() {
            var isValid = Math.random() > 0.5; // 随机验证结果
            resolve(isValid);
        }, 1000);
    });
}

在上述代码中，asyncValidateForm()函数返回一个Promise对象，模拟异步验证过程。在表单提交时，通过then方法处理异步验证结果，决定是否手动提交表单。

综上所述，防止提交表单可以通过监听表单的提交事件、验证输入内容、禁用提交按钮、使用HTML5表单验证属性、结合JavaScript和HTML5表单验证，以及处理异步验证等多种方法实现。通过这些方法，可以确保表单数据的正确性和安全性，从而提升用户体验和系统可靠性。