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

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

• AI资讯 • 阅读 95

前端表单验证是确保用户输入数据合法性和完整性的关键步骤,以下是一个使用 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://test.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

相关推荐

  • 如何正确安装IIS防火墙，配置要求是什么？ AI资讯

    如何正确安装IIS防火墙，配置要求是什么？

    IIS防火墙配置与安装IIS是同一件事的两个环节：先装好IIS角色，再放行防火墙端口，否则网页服务永远只能停留在本机访问，这套组合拳打不通，后面所有网站部署都是空谈，本文直接拆解Windows Server从安装IIS到配置防火墙入站规则的完整流程,覆盖常见报错和实操命令，IIS安装后打不开网页？先检查Wind……

    2026年8月13日
    800
  • 服务器mysql数据库配置出错怎么办？mysql数据库配置教程 AI资讯

    服务器mysql数据库配置出错怎么办？mysql数据库配置教程

    服务器MySQL数据库配置的核心在于根据业务负载合理分配内存、优化连接数并启用合适的存储引擎，通常建议将innodb_buffer_pool_size设置为物理内存的50%-70%以确保最佳性能，很多开发者在拿到新服务器时，往往直接套用默认配置，结果在高并发下频繁出现卡顿或连接超时，MySQL的配置并非一成不变……

    2026年7月5日
    11810
  • 服务器带宽到底多少合适，怎么选带宽不浪费？ AI资讯

    服务器带宽到底多少合适，怎么选带宽不浪费？

    服务器带宽多少合适并没有标准答案，核心取决于你的业务类型、访问量以及对延迟的容忍度，通常文字类网站2Mbps起步，视频或下载类需要10Mbps以上，服务器带宽怎么选才合适选择带宽前,先明确自己搭建的是什么类型的服务，不同场景对带宽的需求差异巨大，行业共识认为，选错带宽不仅浪费预算，还可能影响用户体验，根据业务类……

    2026年7月25日
    1400
  • IIS网站建设怎么修改已绑定域名？网站域名绑定错误怎么办？ AI资讯

    IIS网站建设怎么修改已绑定域名？网站域名绑定错误怎么办？

    修改IIS已绑定网站域名，核心操作就是进入IIS管理器，选中对应站点，在“绑定”设置中完成编辑或删除重建，整个过程只需几步，无需重装服务或重启服务器，很多人在iis网站建设过程中，遇到域名变更或新增绑定需求时容易手忙脚乱，担心弄坏现有站点，掌握了正确路径，这活儿比想象中简单得多，下面直接拆解操作细节，并覆盖常见……

    2026年8月14日
    500
  • it运维监控管理_监控运维 AI资讯

    it运维监控管理_监控运维

    IT运维监控管理的核心在于通过自动化工具实现故障预警、性能分析和资源优化，确保业务连续性，而选型的关键是匹配实际场景与预算，为什么说it运维监控管理是数字化转型的基石业务系统一旦宕机,损失的不只是收入，更是用户信任，IT运维监控管理不再只是技术部门的事，它直接关系到企业能否稳定交付服务，从服务器CPU飙升到数据……

    2026年8月19日
    1400
  • fast服务器到底怎么进入，fast服务器进不去怎么办？ AI资讯

    fast服务器到底怎么进入，fast服务器进不去怎么办？

    进入fast服务器的核心途径是通过IPMI远程管理接口或物理直连显示器键盘进入BIOS与操作系统，具体方式取决于网络环境与硬件状态，fast服务器怎么进bios设置及系统登录全流程服务器就像个脾气倔强的铁盒子,想让它乖乖干活，得找准它的门路，面对一台刚到手的fast服务器，无论是装系统还是改底层配置，进BIOS……

    2026年7月21日
    1000
  • IDC代理和设备代理有什么区别，怎么代理？ AI资讯

    IDC代理和设备代理有什么区别，怎么代理？

    选择IDC代理和设备代理的核心在于平衡成本、技术支持与供应链把控，本文将从选型流程、价格构成、地域选择等角度拆解代理模式的关键节点，帮助你在2026年竞争中精准避坑，idc代理和直接租用服务器，哪种更划算？很多人在入行时都会纠结这个问题：是直接找机房拿资源，还是通过代理转手？两者本质是批发和零售的关系，IDC代……

    2026年8月6日
    500
  • IP地址和域名DNS是什么关系？怎么设置 AI资讯

    IP地址和域名DNS是什么关系？怎么设置

    IP地址、域名和DNS是互联网的三大基石，域名是给人类看的网站名字，IP地址是机器识别的网络位置，而DNS就是那个把域名翻译成IP地址的翻译系统，理解了这三者的关系，你就能清楚为什么上网需要输入域名而不是IP，以及当网站打不开时,问题可能出在哪个环节，行业共识认为，绝大多数网络故障都与DNS配置或解析有关，下面……

    2026年8月6日
    800
  • LM Studio多模态模型怎么调用？LM Studio多模态模型使用教程 AI资讯

    LM Studio多模态模型怎么调用？LM Studio多模态模型使用教程

    LM Studio目前主要支持本地运行LLaVA、LLaVA-Next等多模态大模型，通过内置的“Vision”标签页即可实现图片与文本的交互，无需编写代码或配置复杂的环境变量，适合希望在离线环境下体验AI视觉能力的用户，随着人工智能技术的普及,越来越多的开发者和个人用户开始关注本地化部署的可行性，LM Stu……

    2026年6月18日
    9600
  • 服装店网站建设有哪些思路，服装电商网站建设费用是多少？ AI资讯

    服装店网站建设有哪些思路，服装电商网站建设费用是多少？

    服装店网站建设的核心在于通过高颜值的视觉呈现、极速的页面响应与精准的关键词布局，结合深度的信任背书，将潜在流量高效转化为实际订单，视觉与用户体验的底层逻辑服装属于感性消费品，网站的视觉呈现直接决定了品牌的第一印象，如果页面加载缓慢或排版混乱,用户会在3秒内关闭页面，极简风与品牌调性的统一目前的行业趋势是去冗余化……

    2026年7月13日
    1200

发表回复

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