大家好，欢迎来到IT知识分享网。
在这个教程中，我们将逐步学习如何创建一个简单的注册页面，包括使用 HTML 来构建页面结构、CSS 进行样式设置，以及使用 JavaScript 实现表单验证。
1. HTML 页面结构
首先，我们设置基本的 HTML 页面结构，包括页面头部和表单部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="css/css.css" />
<title>注册页面示例</title>
</head>
<body style="background: #fff">
<!-- 顶部导航栏 -->
<header>
<div class="header">
<div class="logo">
<img src="images/logo.png" width="100" />
</div>
<div class="nav">
<a href="index.html">网站首页</a>
<a href="list2.html">历史</a>
<a href="list3.html">工艺</a>
<a href="list4.html">文化</a>
<a href="list5.html">更多</a>
<a href="#">注册</a>
</div>
</div>
</header>
<!-- 横幅图像 -->
<div class="banner">
<img src="images/1.webp" style="width: 100%; height: 120%" />
</div>
<!-- 表单内容 -->
<div class="width">
<form class="form" action="#" id="form">
<!-- 表单内容在下面解释 -->
</form>
</div>
</body>
</html>
解释：
<!DOCTYPE html>声明文档类型，确保浏览器按照 HTML5 标准解析页面。<head>部分包含元数据，如字符编码和页面标题。<header>中是网站的导航栏，包括 logo 和链接。<div class="banner">用于显示横幅图像。<div class="width">包含注册表单，表单的内容将在下一部分详细介绍。
2. 构建表单元素
接下来，我们在 <form> 标签中添加表单元素，包括输入框和按钮。
<!-- 用户名 --> <div class="input"> <span>用户名：</span> <input type="text" class="phone" placeholder="请输入用户名" id="username" /> </div> <!-- 密码 --> <div class="input"> <span>密码：</span> <input type="password" class="phone pwd" placeholder="请输入密码" id="pwd" /> </div> <!-- 确认密码 --> <div class="input"> <span>确认密码：</span> <input type="password" class="phone pwd2" placeholder="请输入密码" id="pwd2" /> </div> <!-- 提交按钮 --> <div class="input"> <button type="submit" class="denglu">注册</button> </div> 解释：
- 每个
div包含一个输入字段，由一个span和一个input组成。 placeholder提供占位符文本，提示用户该输入框的用途。id属性用于唯一标识每个输入元素，以便在 JavaScript 中获取它们的值。<button type="submit">表示提交按钮。
3. JavaScript 表单验证
我们添加一个脚本来验证用户输入的数据。
<script> document.getElementById("form").addEventListener("submit", function (event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取输入值 let username = document.getElementById("username").value.trim(); let password = document.getElementById("pwd").value.trim(); let confirmPassword = document.getElementById("pwd2").value.trim(); // 验证用户名：只能包含字母和数字，长度为 3-15 let usernameRegex = /^[a-zA-Z0-9]{3,15}$/; if (!usernameRegex.test(username)) { alert("用户名格式不正确，必须是英文字母或数字，长度3-15！"); return; } // 验证密码：长度必须在 6-15 之间 let passwordRegex = /^.{6,15}$/; if (!passwordRegex.test(password)) { alert("密码长度必须在6到15位之间！"); return; } // 验证密码匹配 if (password !== confirmPassword) { alert("确认密码与密码不一致！"); return; } alert("注册成功！"); }); </script> 解释：
document.getElementById("form").addEventListener("submit", function (event) {...})：当用户点击“注册”按钮时，触发submit事件。event.preventDefault()：阻止表单的默认提交行为，方便我们在验证时显示错误信息。usernameRegex和passwordRegex：正则表达式，用于匹配用户名和密码的格式。alert：用于向用户显示验证结果。
4. 详细的验证规则
我们可以添加更多的验证规则，比如对真实姓名、电子邮箱等进行检查。
// 真实姓名验证：必须是 2-10 个中文字符 let chineseNameRegex = /^[\u4e00-\u9fa5]{2,10}$/; let realName = document.getElementById("name").value.trim(); if (!chineseNameRegex.test(realName)) { alert("真实姓名必须是中文，2-10个字符！"); return; } // 电子邮箱验证 let email = document.getElementById("email").value.trim(); let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email === "" || !emailRegex.test(email)) { alert("电子邮箱格式不正确！"); return; } 解释：
- 使用正则表达式
chineseNameRegex确保真实姓名为 2-10 个中文字符。 emailRegex确保电子邮箱符合基本的格式。
5. 完整的表单验证
现在，完整的 JavaScript 表单验证代码如下：
<script> document.getElementById("form").addEventListener("submit", function (event) { event.preventDefault(); // 阻止表单提交 let username = document.getElementById("username").value.trim(); let password = document.getElementById("pwd").value.trim(); let confirmPassword = document.getElementById("pwd2").value.trim(); let realName = document.getElementById("name").value.trim(); let email = document.getElementById("email").value.trim(); // 正则表达式 let usernameRegex = /^[a-zA-Z0-9]{3,15}$/; let passwordRegex = /^.{6,15}$/; let chineseNameRegex = /^[\u4e00-\u9fa5]{2,10}$/; let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 验证用户名 if (!usernameRegex.test(username)) { alert("用户名格式不正确，必须是英文字母或数字，长度3-15！"); return; } // 验证密码 if (!passwordRegex.test(password)) { alert("密码长度必须在6到15位之间！"); return; } // 确认密码 if (password !== confirmPassword) { alert("确认密码与密码不一致！"); return; } // 真实姓名 if (!chineseNameRegex.test(realName)) { alert("真实姓名必须是中文，2-10个字符！"); return; } // 电子邮箱 if (email === "" || !emailRegex.test(email)) { alert("电子邮箱格式不正确！"); return; } alert("注册成功！"); }); </script> 总结：
- 页面结构：使用 HTML 创建表单结构。
- 表单验证：使用 JavaScript 验证用户输入，确保数据的正确性。
- 用户体验：通过使用
alert向用户提供实时反馈，提示用户何时输入有误。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/135176.html
