设计一个用户注册页面，显示当前日期、时间和星期几。注册内容包括用户名，密码及密码确认框，性别，邮箱，手机号码，一个提交按钮，一个重写按钮（清空所有文本框内容 ）。要求检测密码长度为8-12位，检测密码组成需由英文大小写字母和数字组成，检测邮箱格式是否正确，检测手机号码是否是11位。
时间: 2023-11-18 15:02:59 浏览: 29
以下是一个简单的用户注册页面代码示例，包括了显示当前日期、时间和星期几、用户名、密码及密码确认框、性别、邮箱、手机号码、提交按钮和重写按钮，以及对密码长度、密码组成、邮箱格式和手机号码格式的检测：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Registration</title>
<script>
function displayDateTime() {
var now = new Date();
var date = now.getDate();
var month = now.getMonth() + 1;
var year = now.getFullYear();
var day = now.getDay();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
seconds = seconds < 10 ? '0'+seconds : seconds;
var dateTime = month + '/' + date + '/' + year + ' ' + hours + ':' + minutes + ':' + seconds + ' ' + ampm;
document.getElementById('datetime').innerHTML = dateTime;
document.getElementById('day').innerHTML = days[day];
}
setInterval(displayDateTime, 1000);
function validateForm() {
var name = document.forms["registration"]["name"].value;
var password = document.forms["registration"]["password"].value;
var confirmPassword = document.forms["registration"]["confirm-password"].value;
var gender = document.forms["registration"]["gender"].value;
var email = document.forms["registration"]["email"].value;
var phone = document.forms["registration"]["phone"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
if (password == "") {
alert("Password must be filled out");
return false;
}
if (password.length < 8 || password.length > 12) {
alert("Password length should be between 8 and 12 characters");
return false;
}
if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,12}$/.test(password)) {
alert("Password should contain at least one lowercase letter, one uppercase letter and one digit");
return false;
}
if (password != confirmPassword) {
alert("Passwords do not match");
return false;
}
if (gender == "") {
alert("Gender must be selected");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
alert("Email format is invalid");
return false;
}
if (phone == "") {
alert("Phone number must be filled out");
return false;
}
if (!/^\d{11}$/.test(phone)) {
alert("Phone number should be 11 digits");
return false;
}
return true;
}
function resetForm() {
document.forms["registration"].reset();
}
</script>
</head>
<body>
<h1>User Registration</h1>
<form name="registration" onsubmit="return validateForm()">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password"><br>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="" selected disabled hidden>Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"><br>
</fieldset>
<input type="submit" value="Submit">
<input type="button" value="Reset" onclick="resetForm()">
</form>
<p id="datetime"></p>
<p id="day"></p>
</body>
</html>
```
在这个页面中，我们使用了JavaScript来实现日期、时间和星期几的显示，并使用了HTML5表单验证来检测表单中各个字段的输入是否合法。其中：
- `displayDateTime()`函数用于在页面上显示当前日期、时间和星期几。我们使用了`setInterval()`函数来不断地更新显示内容，以保证显示的时间是最新的。
- `validateForm()`函数用于检测表单中各个字段的输入是否合法。我们使用了JavaScript的正则表达式来检测密码长度、密码组成、邮箱格式和手机号码格式。
- `resetForm()`函数用于清空表单中各个输入框的内容，以便用户重新填写。
你可以将这段代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到一个用户注册页面。
最新推荐
登录时记住用户名和密码及cookie案例应用
本文将实现登录时记住用户的帐号密码,接下来我们来模拟一个登录介面，要把这个登录的信息记录至Cookie，还要把Cookie的过期时间设置7天之后过期，感兴趣的朋友可以参考下，希望本文对你的cookie学习有所帮助
python实现用户名密码校验
主要为大家详细介绍了python实现用户名密码校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
beef获取目标主机用户名和密码.docx
运用beef获取目标主机用户名和密码 利用beef获得目标主机shell beef是一个用于合法研究和测试目的的专业浏览器漏洞利用框架
修改oracle数据库用户名及密码的方法
有时候我们可能不知道一个用户的密码，但是又需要以这个用户做一些操作，又不能去修改掉这个用户的密码，这个时候，就可以利用一些小窍门，来完成操作
git设置用户名密码的示例代码
主要介绍了git设置用户名密码的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB取整函数与Web开发的作用：round、fix、floor、ceil在Web开发中的应用
# 1. MATLAB取整函数概述**
MATLAB取整函数是一组强大的工具，用于对数值进行
我想做python的算法工程师，我应该学什么？学习的顺序是什么？网上有什么推荐的免费课程吗？回答具体精确一点不要太笼统
对于想要成为 Python 算法工程师的人来说，他们应该先从掌握 Python 的基础语法开始，然后学习数据结构和算法，并且要深入了解 Python 中的一些科学计算和数据处理库，比如 NumPy、Pandas 等。
学习的顺序可以是先学习基础语法和编程技巧，然后再学习数据结构和算法相关的知识，最后深入了解数据处理和科学计算相关的库。
对于免费课程的推荐，我建议你可以先去 Coursera、edX、Udacity 等网站上寻找相关课程，这些网站上有很多优质的 Python 编程和算法课程，你可以根据自己的需求和学习进度进行选择。此外，还可以考虑一些在线编程网站，如 HackerRank、L
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。