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

相关推荐

  • 服务器与客户端如何连接？服务器连接失败怎么解决 AI资讯

    服务器与客户端如何连接？服务器连接失败怎么解决

    客户端通过TCP/IP协议栈向服务器的特定IP地址和端口发起握手请求，服务器监听该端口并验证身份后，双方建立双向通信通道，连接建立前的基础环境准备在讨论具体的连接动作之前，必须明确网络基础设施的状态，很多用户在遇到连接失败时，往往忽略了最基础的物理层和网络层配置，这就像两个人打电话，如果电话线没插好，或者对方号……

    2026年7月10日
    17200
  • iframe去边框有哪些方法？，怎么设置 AI资讯

    iframe去边框有哪些方法？，怎么设置

    去掉iframe边框的核心方法有两个：设置frameborder=”0″属性或使用CSS的border: none，根据W3C规范，推荐使用CSS方式，但具体选择取决于你的使用场景，怎么去掉iframe边框？基础方法详解很多新手问“怎么去掉iframe边框”，其实实现手段非常直接，下面拆解两种主流方式，并附上操……

    2026年8月21日
    500
  • 通义大模型好用吗？通义千问和通义大模型区别 AI资讯

    通义大模型好用吗？通义千问和通义大模型区别

    通义大模型并非单一工具，而是阿里巴巴通义实验室研发的系列AI模型家族，其核心优势在于多模态理解、超长上下文处理及深度逻辑推理能力，能显著提升内容创作、代码开发及复杂数据分析的效率，通义大模型家族全景解析很多人提到通义大模型时，容易将其混淆为某一款具体的软件，它是一个庞大的技术矩阵，业内专家指出，通义系列涵盖了从……

    2026年6月16日
    2200
  • 服务器虚拟节点是什么，常见的应用场景有哪些？ AI资讯

    服务器虚拟节点是什么，常见的应用场景有哪些？

    服务器虚拟节点是云计算中隔离物理资源、灵活分配计算能力的核心单元，它的出现让企业无需购买整台服务器即可获得独立运行环境，是提升资源利用率和降低运维成本的关键技术，服务器虚拟节点是什么？拆解底层逻辑虚拟节点这个概念,最早来自物理服务器的“分身术”，一台物理机通过Hypervisor层（比如KVM、VMware E……

    2026年7月28日
    1100
  • iis视频网站_IIS服务修改已绑定的网站域名 AI资讯

    iis视频网站_IIS服务修改已绑定的网站域名

    修改IIS视频网站的绑定域名，核心就是在IIS管理器中调整站点主机名、IP和端口组合，并同步更新DNS记录与应用程序配置，整个过程通常十分钟内完成，很多运维人员第一次处理视频网站域名变更时，担心影响正在播放的流媒体，IIS服务修改已绑定的网站域名可以做到平滑过渡，只要提前规划好步骤，本文围绕IIS视频网站域名修……

    2026年8月21日
    400
  • IDC销售网站PHP源码怎么用？哪里下载 AI资讯

    IDC销售网站PHP源码怎么用？哪里下载

    选择一套成熟的IDC销售网站PHP源码，是快速搭建业务平台的关键，核心在于功能完整、安全稳定且支持二次开发，idc销售网站php源码多少钱？价格与价值如何平衡？免费开源与商业授权的价格差异市面上IDC销售系统的PHP源码主要分为两类：免费开源和商业授权，免费开源：无初始费用，但通常需要自行部署和维护，隐形成本包……

    2026年7月30日
    400
  • IAE-mapreduce是什么？，有哪些应用场景？ AI资讯

    IAE-mapreduce是什么？，有哪些应用场景？

    IAE-MapReduce是一种针对迭代计算场景优化的MapReduce扩展框架，通过减少数据混洗和迭代开销，显著提升处理效率，传统MapReduce在处理迭代算法时,每次作业都需要重新读取完整数据，磁盘I/O和网络传输成为瓶颈，IAE-MapReduce通过引入持久化缓存机制，让中间结果在内存中复用，从而大幅……

    2026年8月20日
    300
  • id参数_ID在编程中具体是什么意思呢？, 怎么使用 AI资讯

    id参数_ID在编程中具体是什么意思呢？, 怎么使用

    id参数通过URL传递给服务器，搜索引擎能够抓取和索引这类动态链接，但处理不当会引发参数污染、重复收录和权重分散，直接影响关键词排名，与其纠结要不要用id参数，不如搞清楚它什么时候该出现、什么时候该藏起来,以及如何用技术手段让搜索引擎按你的意图去理解这些链接，id参数URL对SEO有什么影响id参数是动态URL……

    2026年8月8日
    400
  • AI Logo大模型怎么用？AI生成logo哪个软件免费 AI资讯

    AI Logo大模型怎么用？AI生成logo哪个软件免费

    AI Logo大模型能通过输入文字描述自动生成专业级品牌标识，大幅降低设计成本并提升效率，是中小企业和初创团队构建视觉识别系统的最佳选择，为什么2026年AI Logo大模型成为设计新标配在2026年的商业环境中,品牌视觉形象的建设速度直接关联市场响应能力，传统设计流程往往需要经历需求沟通、初稿修改、定稿交付等……

    2026年6月16日
    3500
  • 遭遇DoS攻击怎么办？如何有效防范DoS攻击 AI资讯

    遭遇DoS攻击怎么办？如何有效防范DoS攻击

    防范DDoS攻击的核心在于构建“云端清洗+本地加固+流量调度”的立体防御体系，而非单纯依赖单一硬件设备，理解DDoS攻击的本质与常见场景很多人提到DDoS（分布式拒绝服务攻击）时，第一反应是黑客在“砸场子”，这种比喻很形象，但不够精准，DDoS的本质是攻击者利用海量僵尸网络资源，向目标服务器发送超出其处理能力的……

    2026年7月11日
    17400

发表回复

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