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

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

• AI资讯 • 阅读 97

前端表单验证是确保用户输入数据合法性和完整性的关键步骤,以下是一个使用 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/form%e8%a1%a8%e5%8d%95%e9%aa%8c%e8%af%81%e6%80%8e%e4%b9%88%e5%ae%9e%e7%8e%b0%ef%bc%9fform%e8%a1%a8%e5%8d%95%e9%aa%8c%e8%af%81%e5%bf%85%e5%a1%ab%e9%a1%b9/

赞 (0)
0

关于作者

王坚‌

王坚‌

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

相关推荐

  • 如何修改服务器地址？服务器修改地址详细步骤 AI资讯

    如何修改服务器地址？服务器修改地址详细步骤

    服务器修改地址并非简单的IP替换，而是涉及DNS解析、负载均衡配置及防火墙策略联动的系统工程，操作核心在于确保服务零中断与数据一致性，在数字化转型的深水区,企业IT架构的灵活性直接决定了业务响应速度，很多时候，运维人员面临的最棘手问题不是服务器宕机，而是如何在不停机的情况下完成网络地址的变更，这听起来像是一个简……

    2026年7月8日
    12300
  • 设备接入VIS的SIP服务器地址怎么获取？具体步骤是什么？ AI资讯

    设备接入VIS的SIP服务器地址怎么获取？具体步骤是什么？

    VIS平台的SIP服务器地址不是固定值，而是由您在VIS控制台创建的接入位置决定，获取路径就在该接入位置的详情页中，设备接入VIS（视频接入服务）前，需要完成GB/T 28181国标注册，而SIP服务器地址是注册的核心参数，本文直接拆解华为云VIS控制台的操作路径、参数含义以及配置验证方法，vis接入sip服务……

    2026年8月17日
    1600
  • 服务器存储软件怎么选？2026年热门服务器存储软件推荐 AI资讯

    服务器存储软件怎么选？2026年热门服务器存储软件推荐

    服务器存储软件的核心价值在于通过智能分层、快照备份及去重压缩技术，在保障数据绝对安全的前提下显著降低硬件采购成本并提升I/O读写性能，为什么企业需要专业的服务器存储软件在数字化转型的深水区,数据已成为企业的核心资产，许多IT管理者在初期往往忽视软件层面的优化，直接堆砌硬件，导致资源浪费，业内专家指出，单纯依靠增……

    2026年7月3日
    1400
  • 海洋航海AI大模型如何提升航行效率？ AI资讯

    海洋航海AI大模型如何提升航行效率？

    海洋航海AI大模型通过融合多源感知数据与强化学习算法，正在将传统航海从“经验驱动”升级为“数据驱动”，显著提升了船舶在复杂海况下的自主决策能力与航行安全性，为什么航海业急需AI大模型介入？过去，航海主要依赖船长的个人经验和纸质海图，这种模式在平静海域或许够用，但在面对极端天气、密集航道或突发机械故障时，人类的反……

    2026年6月14日
    2610
  • IT行业网络编辑如何编辑网络研讨会？,网络编辑有前途吗 AI资讯

    IT行业网络编辑如何编辑网络研讨会？,网络编辑有前途吗

    IT行业的网络编辑在编辑网络研讨会时，核心任务是将技术观点转化为具备搜索潜力的图文内容，实现专业价值与流量获取的平衡， 这意味着你需要同时扮演技术翻译、SEO优化师和内容策划者三个角色，IT行业网络编辑的工作内容与网络研讨会编辑要点IT行业网络编辑的工作内容已从简单的信息发布转向深度内容策划，你不仅需要熟悉技术……

    2026年8月4日
    500
  • 如何配置邮箱服务器的IP域名反向解析，具体步骤有哪些？ AI资讯

    如何配置邮箱服务器的IP域名反向解析，具体步骤有哪些？

    配置邮箱服务器的反向解析，核心是在DNS管理中添加PTR记录，将IP地址指向你的发信域名，这是提升邮件送达率、避免被识别为垃圾邮件的关键步骤，什么是ip域名反向解析，为什么邮箱服务器必须配置？ip域名反向解析，简单说就是通过IP地址查询对应的域名，与常见的正向解析（域名→IP）正好相反，在邮箱服务器场景下，反向……

    2026年8月21日
    1300
  • IIS8如何配置相同域名不同路径精准转发？，域名转发怎么设置 AI资讯

    IIS8如何配置相同域名不同路径精准转发？，域名转发怎么设置

    IIS8配置域名转发，核心是用URL Rewrite模块按路径精确匹配，再配合反向代理规则，就能实现同一域名下不同路径转发到不同后端服务，而不是简单的整站跳转，关于IIS8域名转发，很多站长一开始的思路是“绑定多个域名，每个域名跳转一次”，但遇到“news站点跳转到A服务器，shop站点跳转到B服务器”这类需求……

    2026年8月21日
    900
  • IMSI号对应省份数据库有哪些DSC内置识别规则，怎么查 AI资讯

    IMSI号对应省份数据库有哪些DSC内置识别规则，怎么查

    IMSI号对应省份数据库的DSC内置识别规则，主要基于国际移动用户识别码的前缀号段及运营商公开的归属地字典，自动完成号码归属省份的识别与数据分类分级打标，IMSI（国际移动用户识别码）是移动网络中唯一标识用户的号码，前三位MCC（国家代码，中国为460）后跟MNC（网络代码，如01、02对应运营商），后续号段包……

    2026年8月13日
    800
  • iis7如何建立网站？通话建立后有哪些注意事项？ AI资讯

    iis7如何建立网站？通话建立后有哪些注意事项？

    IIS7建立网站后，真正考验人的不是点击“下一步”的创建过程，而是“通话建立后”——也就是网站首次被外部访问成功的那一刻起，权限、日志、绑定、性能这些细节才会露出真面目，很多朋友在Windows Server上装好IIS7，把站点一建，就以为大功告成，结果域名一解析，浏览器一打开，要么403，要么500，要么直……

    2026年8月14日
    400
  • 福州公司网站建设怎么做？福州网站建设费用及流程详解 AI资讯

    福州公司网站建设怎么做？福州网站建设费用及流程详解

    福州公司网站建设的核心在于通过移动端适配、极速加载及本地化SEO策略，构建一个既能承载品牌专业形象，又能精准捕获福州本地及周边区域流量的数字化获客终端，在数字化浪潮席卷的今天，企业官网早已不再是简单的“网络名片”，而是24小时在线的销售顾问，对于福州的企业而言，如何在竞争激烈的互联网环境中脱颖而出，关键在于理解……

    2026年7月3日
    8900

发表回复

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