js form

作者：浪推晚风发布日期:2025-03-21 浏览:79

<!DOCTYPE html>
<html>
<head>
    <title>JS Form Example</title>
</head>
<body>
    <form id="myForm">
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username"><br>
        <label for="password">Password:</label><br>
        <input type="password" id="password" name="password"><br><br>
        <input type="submit" value="Submit">
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取表单字段的值
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;

            // 简单验证 (这里只是一个示例，实际应用中应更严格)
            if (username === '' || password === '') {
                alert('Username and password are required!');
                return;
            }

            // 模拟提交数据到服务器（这里使用console.log代替）
            console.log('Form submitted with username: ' + username + ' and password: ' + password);

            // 清空表单
            document.getElementById('myForm').reset();
        });
    </script>
</body>
</html>

解释说明：

HTML部分：定义了一个简单的表单，包含两个输入字段（用户名和密码）以及一个提交按钮。
JavaScript部分：
- 使用addEventListener为表单添加了提交事件监听器。
- event.preventDefault()用于阻止表单的默认提交行为，以便我们可以自定义处理逻辑。
- 获取表单字段的值，并进行简单的验证（确保用户名和密码不为空）。
- 如果验证通过，模拟提交数据到服务器（这里只是打印到控制台）。
- 最后，调用reset()方法清空表单。

上一篇：js 获取页面宽度

下一篇：js scrolltop