用JavaScript写项目中至少有一个注册页面,实现JS验证用户信息并返回结果的特效。 用户信息包括: 1)用户名:6到16位字母、数字、下划线,不能使用特殊符号; 2)密码:8到16位字符,必须包含大小写字母、数字和指定特殊符号; 3)密码确认:必须和密码完全一致才合格; 4)生日:设计、提示并验证按指定的格式输入生日日期。 5)邮箱; 6)手机号等。 验证合格要在页面动态显示通过信息。验证不合格要提示错误信息。 3. 项目中至少有一个主页,实现JS的菜单特效(可以是动画菜单、树形菜单、下拉菜单、右键菜单等)。 4. 项目中至少实现一个图片特效设计(横向的相册效果、纵向的相册效果、图片轮播等)。 5. 项目中至少实现一个鼠标事件效果。
时间: 2024-03-20 13:43:34 浏览: 154
好的,下面是一个简单的注册页面的示例代码,包括输入用户名、密码、确认密码、生日、邮箱和手机号,以及JS验证和动态显示验证结果:
```
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
</head>
<body>
<h1>注册页面</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br><br>
<label for="birthday">生日:</label>
<input type="text" id="birthday" name="birthday" placeholder="YYYY-MM-DD"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">手机号:</label>
<input type="tel" id="phone" name="phone"><br><br>
<input type="button" value="注册" onclick="register()">
</form>
<div id="result"></div>
<script>
function register() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirm-password").value;
var birthday = document.getElementById("birthday").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
if (!username.match(/^\w{6,16}$/)) {
document.getElementById("result").innerHTML = "用户名必须是6到16位字母、数字、下划线";
} else if (!password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/)) {
document.getElementById("result").innerHTML = "密码必须是8到16位字符,必须包含大小写字母、数字和指定特殊符号";
} else if (password !== confirmPassword) {
document.getElementById("result").innerHTML = "确认密码必须和密码完全一致";
} else if (!birthday.match(/^\d{4}-\d{2}-\d{2}$/)) {
document.getElementById("result").innerHTML = "生日必须按指定的格式输入(YYYY-MM-DD)";
} else if (!email.match(/^\w+@[a-z0-9]+\.[a-z]{2,}$/i)) {
document.getElementById("result").innerHTML = "请输入正确的邮箱地址";
} else if (!phone.match(/^1[3456789]\d{9}$/)) {
document.getElementById("result").innerHTML = "请输入正确的手机号码";
} else {
document.getElementById("result").innerHTML = "注册成功!";
}
}
</script>
</body>
</html>
```
这个示例页面包括一个输入用户名、密码、确认密码、生日、邮箱和手机号的表单,以及一个注册按钮。当用户点击注册按钮时,JS代码会获取表单中的用户信息,并进行验证。如果某个信息不符合要求,页面会提示用户重新输入;如果所有信息都验证通过,页面会显示注册成功。
阅读全文