html工具

作者：醉眼看苍生发布日期:2026-05-09 浏览:98

<!-- 示例代码：HTML工具 - 简单的表单验证工具 -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML工具 - 表单验证</title>
    <style>
        .error { color: red; }
    </style>
</head>
<body>
    <h1>表单验证工具</h1>
    <form id="myForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>
        <span class="error" id="nameError"></span><br><br>

        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" required>
        <span class="error" id="emailError"></span><br><br>

        <input type="submit" value="提交">
    </form>

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

            let isValid = true;
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();

            // 清除之前的错误信息
            document.getElementById('nameError').textContent = '';
            document.getElementById('emailError').textContent = '';

            if (name === '') {
                document.getElementById('nameError').textContent = '姓名不能为空';
                isValid = false;
            }

            if (email === '') {
                document.getElementById('emailError').textContent = '电子邮件不能为空';
                isValid = false;
            } else if (!validateEmail(email)) {
                document.getElementById('emailError').textContent = '无效的电子邮件格式';
                isValid = false;
            }

            if (isValid) {
                alert('表单提交成功！');
                // 这里可以添加提交表单到服务器的逻辑
            }
        });

        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
    </script>
</body>
</html>

解释说明：

HTML结构:
- 创建了一个简单的表单，包含两个输入字段（姓名和电子邮件）和一个提交按钮。
- 使用了<label>标签来关联输入字段，增强了可访问性。
CSS样式:
- 定义了一个.error类，用于显示红色的错误信息。
JavaScript功能:
- 添加了一个事件监听器来处理表单提交事件。
- 在提交时，检查输入字段是否为空，并验证电子邮件格式。
- 如果有任何错误，显示相应的错误信息并阻止表单提交。
- 如果所有验证通过，弹出一个成功的提示框。

这个示例展示了如何使用HTML、CSS和JavaScript创建一个简单的表单验证工具。

上一篇：html 文本框

下一篇：html中display是什么意思