只用html和js制作用户注册和登录页面和密码修改页面三个页面转换
时间: 2023-07-16 22:11:51 浏览: 43
好的,我可以为您提供一个基本的示例代码,您可以在此基础上进行修改和完善。
首先是用户注册页面(register.html)的代码:
```
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta charset="utf-8">
<script type="text/javascript">
function checkForm(){
//检查表单是否填写完整
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var repassword = document.getElementById("repassword").value;
if(username == "" || password == "" || repassword == ""){
alert("请填写完整信息!");
return false;
}
//检查两次密码是否一致
if(password != repassword){
alert("两次密码不一致!");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>用户注册</h1>
<form action="register.php" method="post" onsubmit="return checkForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="repassword">确认密码:</label>
<input type="password" id="repassword" name="repassword"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
```
接下来是登录页面(login.html)的代码:
```
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<meta charset="utf-8">
<script type="text/javascript">
function checkForm(){
//检查表单是否填写完整
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == "" || password == ""){
alert("请填写完整信息!");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>用户登录</h1>
<form action="login.php" method="post" onsubmit="return checkForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
最后是密码修改页面(change_password.html)的代码:
```
<!DOCTYPE html>
<html>
<head>
<title>修改密码</title>
<meta charset="utf-8">
<script type="text/javascript">
function checkForm(){
//检查表单是否填写完整
var oldpassword = document.getElementById("oldpassword").value;
var newpassword = document.getElementById("newpassword").value;
var renewpassword = document.getElementById("renewpassword").value;
if(oldpassword == "" || newpassword == "" || renewpassword == ""){
alert("请填写完整信息!");
return false;
}
//检查两次新密码是否一致
if(newpassword != renewpassword){
alert("两次新密码不一致!");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>修改密码</h1>
<form action="change_password.php" method="post" onsubmit="return checkForm()">
<label for="oldpassword">旧密码:</label>
<input type="password" id="oldpassword" name="oldpassword"><br>
<label for="newpassword">新密码:</label>
<input type="password" id="newpassword" name="newpassword"><br>
<label for="renewpassword">确认新密码:</label>
<input type="password" id="renewpassword" name="renewpassword"><br>
<input type="submit" value="修改">
</form>
</body>
</html>
```
以上代码中,`checkForm()` 函数用于检查表单是否填写完整,以及两次输入的密码是否一致。您可以根据自己的实际需求进行修改。
另外,上述代码中的 `action` 属性值分别为 "register.php"、"login.php" 和 "change_password.php",这是用来处理表单提交的 PHP 文件,您需要自行编写这些文件来完成相应的功能。
希望这份示例代码能够对您有所帮助。