1. 简米科技首页
  2. AI资讯

form表单验证怎么实现？form表单验证必填项

• AI资讯 • 阅读 96

前端表单验证是确保用户输入数据合法性和完整性的关键步骤,以下是一个使用 HTML、CSS 和 JavaScript 实现简单表单验证的示例：

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">表单验证示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form id="myForm">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required>
            <span class="error-message" id="usernameError"></span>
        </div>
        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" required>
            <span class="error-message" id="emailError"></span>
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            
form表单验证怎么实现？form表单验证必填项


前端案例【表单验证】HTML+CSS+JS
加载中
前端案例【表单验证】HTML+CSS+JS

<input type="password" id="password" name="password" required>
            <span class="error-message" id="passwordError"></span>
        </div>
        <button type="submit">提交</button>
    </form>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

/ style.css /
.form-group {
    margin-bottom: 15px;
}
.error-message {
    color: red;
    font-size: 12px;
    display: block;
    margin-top: 5px;
}

JavaScript 验证逻辑

// script.js
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    // 获取输入值
    const username = document.getElementById('username').value.trim();
    const email = document.getElementById('email').value.trim();
    const password = document.getElementById('password').value.trim();
    // 验证用户名
    if (username === '') {
        showError('usernameError', '用户名不能为空');
    } else if (username.length < 3) {
        showError('usernameError', '用户名至少需要3个字符');
    } else {
        clearError('usernameError')
form表单验证怎么实现？form表单验证必填项
;
    }
    // 验证邮箱
    const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
    if (email === '') {
        showError('emailError', '邮箱不能为空');
    } else if (!emailPattern.test(email)) {
        showError('emailError', '请输入有效的邮箱地址');
    } else {
        clearError('emailError');
    }
    // 验证密码
    if (password === '') {
        showError('passwordError', '密码不能为空');
    } else if (password.length < 6) {
        showError('passwordError', '密码至少需要6个字符');
    } else {
        clearError('passwordError');
    }
    // 如果所有验证都通过，则提交表单
    if (!document.getElementById('usernameError').textContent &&
        !document.getElementById('emailError').textContent &&
        !document.getElementById('passwordError').textContent) {
        alert('表单验证通过！');
        // 这里可以添加实际的表单提交逻辑
        // this.submit();
    }
});
// 显示错误信息
function showError(elementId, message) {
    const errorElement = document.getElementById(elementId);
    errorElement.textContent = message;
}
// 清除错误信息
function clearError(elementId) {
    const errorElement = document.getElementById(elementId);
    errorElement.textContent = '';
}

form表单验证怎么实现？form表单验证必填项

说明

  1. HTML 结构：

    • 使用 <form> 元素包裹所有输入字段。
    • 每个输入字段旁边都有一个 <span> 元素用于显示错误信息。

  2. CSS 样式：

    • .error-message 类用于设置错误信息的样式，使其以红色小字体显示在输入字段下方。

  3. JavaScript 验证逻辑：

    • 监听表单的 submit 事件，阻止默认提交行为。
    • 获取每个输入字段的值并进行验证。
    • 如果验证失败,显示相应的错误信息；如果验证成功，清除错误信息。
    • 如果所有验证都通过,则提示用户表单验证通过，并可以在此处添加实际的表单提交逻辑。

注意事项

  • 用户体验：确保错误信息清晰明了，帮助用户快速理解并修正错误。
  • 安全性：前端验证主要用于提升用户体验，后端仍需进行数据验证以确保数据安全。
  • 可扩展性：可以根据需要添加更多的验证规则和更复杂的交互逻辑。

这个示例展示了基本的表单验证流程,你可以根据具体需求进行调整和扩展。

首发原创文章，作者：王坚‌，如若转载，请注明出处：https://idctop.com/article/484952.html

赞 (0)
0

关于作者

王坚‌

王坚‌

计算机分布式系统硕士，10 年云原生存储与数据库研发经验，曾任头部云厂商数据库实验室核心研究员，持有 20 余项存储内核专利，CNCF 云原生讲师，常年受邀出席 KubeCon、数据库技术大会，多篇行业白皮书联合撰稿人，技术成果获得多家头部互联网厂商技术团队落地验证。
域名DNS高可用怎么设计？DNS故障切换方案
上一篇 2026年7月12日 04:27
flashupload文件是什么？flashupload文件怎么打开
下一篇 2026年7月12日 04:30

相关推荐

  • 服务器跳转和客户端跳转区别是什么？HTTP重定向与JS跳转哪种更好 AI资讯

    服务器跳转和客户端跳转区别是什么？HTTP重定向与JS跳转哪种更好

    服务器跳转（301/302）由后端控制，权重传递稳定且利于SEO；客户端跳转（JS/Meta）由前端控制，响应快但权重流失严重，核心场景下应优先选择服务器端方案，在网页开发的日常维护与重构中,跳转机制的选择往往决定了流量的去向和搜索引擎的收录效率，很多开发者容易混淆这两者的底层逻辑，导致网站改版后出现排名暴跌或……

    2026年7月8日
    19100
  • 服务器客户端字符串TCP通信出错怎么办？TCP粘包拆包解决方法 AI资讯

    服务器客户端字符串TCP通信出错怎么办？TCP粘包拆包解决方法

    在TCP协议下，服务器与客户端通过字符串进行通信时，核心在于处理“粘包”与“拆包”问题，通常采用固定长度、分隔符或长度前缀等策略来确保数据边界清晰，想象一下,TCP就像是一条没有隔断的传送带，而字符串则是你放在上面的包裹，服务器和客户端就是传送带两端的工人，如果包裹大小不一，且源源不断地堆叠，工人就很难分清哪个……

    2026年7月5日
    6100
  • index页面能用CDN加速吗？, 怎么设置 AI资讯

    index页面能用CDN加速吗？, 怎么设置

    index页面完全可以接入CDN，CDN也支持针对网站单个页面做加速，但两者在实现方式和适用场景上有着本质区别——前者是“全站接入”，后者是“规则驱动”的精细化操作，搞懂这两个概念的区别，能帮你省下不必要的流量成本，也能避免因为操作不当导致首页权重波动，下面从原理、实操到效果预期,一次性讲透，CDN支持针对网站……

    2026年8月11日
    900
  • fptree机器学习是什么？fp-growth算法原理详解 AI资讯

    fptree机器学习是什么？fp-growth算法原理详解

    FPTree算法通过构建频繁模式树，以极低的内存开销和单次扫描数据库的效率，成为解决海量数据关联规则挖掘的核心技术，尤其适合处理高密度、高维度的交易数据场景，在数据挖掘的浩瀚海洋中，如何从数以亿计的交易记录中快速提炼出有价值的商品关联关系，一直是零售、电商及金融风控领域的痛点，传统的Apriori算法虽然经典……

    2026年7月6日
    11700
  • 分布式存储方案怎么选？企业级分布式存储解决方案有哪些 AI资讯

    分布式存储方案怎么选？企业级分布式存储解决方案有哪些

    分布式存储通过多节点协同工作，解决了单机存储的容量瓶颈与单点故障风险，是构建海量数据基础设施的必然选择，传统集中式存储就像把鸡蛋放在一个篮子里，一旦篮子打翻，所有数据瞬间丢失，而分布式存储则是将鸡蛋分散在成千上万个篮子里，即使丢失几个，整体依然完好无损，这种架构不仅提升了数据的可靠性，更让存储资源的弹性扩展成为……

    2026年7月7日
    6500
  • 大模型的XTENT评测是什么 AI资讯

    大模型的XTENT评测是什么

    大模型的XTENT评测并非单一指标，而是通过扩展上下文窗口、提升长文本理解力及优化多模态推理能力，全面衡量模型在处理超长文档、复杂逻辑链及跨模态任务时的综合性能边界，在人工智能技术飞速迭代的2026年,大语言模型的能力早已突破了简单的问答范畴，用户不再仅仅关心模型能否写出流畅的代码或文章，更关注它能否一次性阅读……

    2026年6月21日
    3510
  • ipv6网站建设东莞的目标是什么？，如何实现？ AI资讯

    ipv6网站建设东莞的目标是什么？，如何实现？

    东莞企业网站IPv6改造的核心目标，不是应付考核，而是让网站真正具备下一代互联网的接入能力，在2026年之前完成从“能访问”到“好用”的跨越，站在2025年这个时间节点回头看,东莞的IPv6建设已经从“政策鼓励”变成了“实际需求”，很多企业主问我，东莞ipv6网站建设到底要达成什么目标？是装个双栈就完事了吗？显……

    2026年8月13日
    1300
  • 小米AI大模型如何扩图？AI图片生成工具哪个好用 AI资讯

    小米AI大模型如何扩图？AI图片生成工具哪个好用

    小米AI大模型扩图功能通过生成式人工智能技术，能基于原有图片边缘智能补全缺失画面，显著提升创作效率并降低后期修图门槛，是2026年移动端影像处理的主流解决方案，在2026年的数字内容创作环境中,图像处理的边界正在被不断重塑，过去，想要扩展一张照片的构图，用户往往需要借助复杂的桌面端专业软件，或者忍受低质量的拉伸……

    2026年6月15日
    2300
  • IP防火墙和普通防火墙有何区别，防火墙怎么设置？ AI资讯

    IP防火墙和普通防火墙有何区别，防火墙怎么设置？

    ip防火墙是什么：先搞懂它和传统防火墙的区别IP防火墙的核心价值在于：它不只是一道网络大门，而是基于IP地址维度的智能访问控制体系，能让你的服务器只对”该来的人”开门，很多朋友搞不清楚”ip防火墙”和平时听说的”防火墙”到底有什么区别，行业共识认为，传统防火墙侧重端口和协议的过滤，而IP防火墙更聚焦在源IP地址……

    2026年8月8日
    1200
  • IT运维管理的主要工作内容是什么？，如何高效完成？ AI资讯

    IT运维管理的主要工作内容是什么？，如何高效完成？

    IT运维管理是保障企业IT系统稳定运行的核心手段，它融合了监控、自动化、服务管理与安全合规，其最终目标是实现业务连续性与成本效率的平衡，IT运维管理包括哪些内容？核心模块全解析监控与告警：系统稳定性的基石监控是运维管理的起点,没有实时可见的指标，故障就无法被提前发现，业内专家指出，近年来监控体系已从单一的基础设……

    2026年8月17日
    800

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注