动态网站:注册,登录,修改密码,修改资料,找回密码。
主页面:包含登录,注册,修改密码和找回密码按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>登录页面</title>
<script language = "javascript">
function check() {
if(form1.user.value == "" || form1.user.value == "请输入用户名") {
alert("用户名不能为空");
form1.user.focus(); // 光标自动跳到用户名栏
return ;
}
if(form1.pwd.value == "") {
alert("密码不能为空");
form1.pwd.focus(); // 光标自动跳到密码栏
return ;
}
if(form1.user.value.length < 3 || form1.user.value.length > 8) {
alert("用户名长度应为3--8位");
form1.user.focus();
return ;
}
if(form1.pwd.value.length < 5 || form1.pwd.value.length > 15) {
alert("密码长度应为5--15位");
form1.pwd.focus();
return ;
}
form1.submit();
}
function f1() {
form1.user.value = "";
}
function f2() {
if(form1.user.value == "")
form1.user.value = "请输入用户名";
}
</script>
</head>
<body>
<form name = "form1" action = "dlcg.html">
<table align = "center">
<tr>
<td>用户名:</td>
<td>
<input type = "text" onfocus = "f1()" onblur = "f2()" value = "请输入用户名" name = "user">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type = "password" name = "pwd">
</td>
</tr>
<tr>
<td>
<input type = "button" onclick = check() value = "登录">
</td>
<td>
<a href = "zhuce.html"><input type = "button" value = "注册"></a> <!-- 超链接按钮形式 -->
</td>
</tr>
<tr>
<td>
<a href = "xiugaimima.html"><input type = "button" value = "修改密码"></a>
</td>
<td>
<a href = "zhaohuimima.html"><input type = "button" value = "找回密码"></a>
</td>
</tr>
</table>
</form>
</body>
</html>
登录成功页面
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>登录成功页面</title>
</head>
<body>
<form action = "xiugaiziliao.html">
<table algin = "center">
<tr></tr>
<tr></tr>
<tr>
<td>
<img width = 300 height = 300 src = "dan.jfif">
</td>
</tr>
<tr>
<td>登录成功</td>
</tr>
<tr>
<td>
<input type = "submit" value = "修改资料">
</td>
<td>
<a href = "denglu.html"><input type = "button" value = "返回主界面"></a>
</td>
</tr>
</table>
</form>
</body>
</html>
注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script language="javascript">
function check() {
if(form2.user.value=="" || form2.user.value=="请输入用户名") {
alert("请输入用户名");
form2.user.focus(); // 光标自动跳到用户名栏
return ;
}
if(form2.pwd1.value=="") {
alert("请输入密码");
form2.pwd1.focus(); // 光标自动跳到密码栏
return ;
}
if(form2.pwd1.value.length < 5 || form2.pwd1.value.length > 15) {
alert("密码长度应为5--15位");
form2.pwd1.focus();
return ;
}
if(form2.pwd2.value=="") {
alert("请输入确认密码");
form2.pwd2.focus(); // 光标自动到确认密码栏
return ;
}
if(form2.pwd2.value.length < 5 || form2.pwd2.value.length > 15) {
alert("密码长度应为5--15位");
form2.pwd2.focus();
return ;
}
if(form2.pwd1.value!=form2.pwd2.value) {
alert("两次输入密码不一致");
form2.pwd1.focus(); // 光标自动到密码栏
return ;
}
if(form2.sjh.value=="") {
alert("请输入手机号");
form2.sjh.focus(); // 光标自动到手机号栏
return ;
}
form2.submit();
}
function f1() {
form2.user.value="";
}
function f2() {
if(form2.user.value=="")
form2.user.value="请输入用户名";
}
</script>
</head>
<body>
<form name="form2" action="zccg.html">
<table align="center">
<tr>
<td>用户名:</td>
<td>
<input type="text" onfocus="f1()" onblur="f2()" value="请输入用户名" name="user">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd1">
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="pwd2">
</td>
</tr>
<tr>
<td>手机号:</td>
<td>
<input type="text" name="sjh">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name=sex checked>男
<input type="radio" name=sex>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input name="like" type="checkbox" value="music">音乐
<input name="like" type="checkbox" value="dance">舞蹈
<input name="like" type="checkbox" value="rap">说唱
<input name="like" type="checkbox" value="basketball">篮球
</td>
</tr>
<tr>
<td>出生地:</td>
<td>
<select name="space">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>青岛</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" onclick=check() value="确认注册">
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "denglu.html">
<table align = "center">
<tr>
<td>注册成功</td>
</tr>
<tr>
<td>
<input type = "submit" value = "返回登录界面">
</td>
<tr>
</table>
</form>
</body>
</html>
修改密码
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>修改密码页面</title>
<script language = "javascript">
function check() {
if(form3.user.value == "" || form3.user.value == "请输入用户名") {
alert("用户名不能为空");
form3.user.focus(); // 光标自动跳到用户名栏
return ;
}
if(form3.pwd1.value == "") {
alert("旧密码不能为空");
form3.pwd1.focus(); // 光标自动跳到旧密码栏
return ;
}
if(form3.pwd2.value == "") {
alert("新密码不能为空");
form3.pwd2.focus(); // 光标自动跳到新密码栏
return ;
}
if(form3.pwd2.value.length < 5 || form3.pwd2.value.length > 15) {
alert("密码长度应为5--15位");
form3.pwd2.focus();
return ;
}
if(form3.pwd3.value == "") {
alert("确认密码不能为空");
form3.pwd3.focus(); // 光标自动跳到确认密码栏
return ;
}
if(form3.pwd3.value.length < 5 || form3.pwd3.value.length > 15) {
alert("密码长度应为5--15位");
form3.pwd3.focus();
return ;
}
if(form3.pwd2.value != form3.pwd3.value) {
alert("两次输入密码不一致");
form3.pwd2.focus(); // 光标自动跳到新密码栏
return ;
}
form3.submit();
}
function f1() {
form3.user.value = "";
}
function f2() {
if(form3.user.value == "")
form3.user.value = "请输入用户名";
}
</script>
</head>
<body>
<form name = "form3" action = "xgcg.html">
<table align = "center">
<tr>
<td>用户名:</td>
<td>
<input type = "text" onfocus = "f1()" onblur = "f2()" value = "请输入用户名" name = "user">
</td>
</tr>
<tr>
<td>旧密码:</td>
<td>
<input type = "password" name = "pwd1">
</td>
</tr>
<tr>
<td>新密码:</td>
<td>
<input type = "password" name = "pwd2">
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type = "password" name = "pwd3">
</td>
</tr>
<tr>
<td>
<input type = "button" onclick = check() value = "保存">
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改密码成功页面</title>
</head>
<body>
<form action = "denglu.html">
<table align = "center">
<tr>
<td>修改密码成功</td>
</tr>
<tr>
<td>
<input type = "submit" value = "返回登录界面">
</td>
<tr>
</table>
</form>
</body>
</html>
找回密码
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>找回密码页面</title>
<script language = "javascript">
function check() {
if(form4.sjh.value == "") {
alert("请输入手机号");
form4.sjh.focus(); // 光标自动跳到手机号栏
return ;
}
if(form4.yzm.value == "") {
alert("请输入验证码");
form4.yzm.focus(); // 光标自动跳到验证码栏
return ;
}
form4.submit();
}
</script>
</head>
<body>
<form name = "form4" action = "chongxie.html">
<table align = "center">
<tr>
<td>手机号:</td>
<td>
<input type = "text" name = "sjh">
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type = "text" name = "yzm">
</td>
</tr>
<tr>
<td>
<input type = "button" onclick = check() value = "保存">
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>重填页面</title>
<script language = "javascript">
function check() {
if(form6.mm1.value == "") {
alert("请输入新密码");
form6.mm1.focus(); // 光标自动跳到新密码栏
return ;
}
if(form6.mm1.value.length < 5 || form6.mm1.value.length > 15) {
alert("密码长度应为5--15位");
form6.mm1.focus();
return ;
}
if(form6.mm2.value == "") {
alert("请输入确认密码");
form6.mm2.focus(); // 光标自动跳到确认密码栏
return ;
}
if(form6.mm2.value.length < 5 || form6.mm2.value.length > 15) {
alert("密码长度应为5--15位");
form6.mm2.focus();
return ;
}
if(form6.mm1.value != form6.mm2.value) {
alert("两次输入密码不一致");
form6.mm1.focus(); // 光标自动跳到新密码栏
return ;
}
form6.submit();
}
</script>
</head>
<body>
<form name = "form6" action = "zhcg.html">
<table align = "center">
<tr>
<td>输入新密码:</td>
<td>
<input type = "password" name = "mm1">
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type = "password" name = "mm2">
</td>
</tr>
<tr>
<td>
<input type = "button" onclick = check() value = "保存">
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>找回密码成功页面</title>
</head>
<body>
<form action = "denglu.html">
<table algin = "center">
<tr>
<td>找回密码成功</td>
</tr>
<tr>
<td>
<input type = "submit" value = "返回登录页面">
</td>
</tr>
</table>
</form>
</body>
</html>
修改资料
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>修改资料页面</title>
<script language = "javascript">
function check() {
if(form5.jmm.value == "") {
alert("旧密码不能为空");
form5.jmm.focus(); // 光标自动跳到旧密码栏
return ;
}
if(form5.xmm.value == "") {
alert("新密码不能为空");
form5.xmm.focus(); // 光标自动跳到新密码栏
return ;
}
if(form5.xmm.value.length < 5 || form5.xmm.value.length > 15) {
alert("密码长度应为5--15位");
form5.xmm.focus();
return ;
}
if(form5.qrmm.value == "") {
alert("确认密码不能为空");
form5.qrmm.focus(); // 光标自动跳到确认密码栏
return ;
}
if(form5.qrmm.value.length < 5 || form5.qrmm.value.length > 15) {
alert("密码长度应为5--15位");
form5.qrmm.focus();
return ;
}
if(form5.xmm.value != form5.qrmm.value) {
alert("两次输入密码不一致");
form5.xmm.focus(); // 光标自动跳到新密码栏
return ;
}
form5.submit();
}
</script>
</head>
<body>
<form name = "form5" action = "xgzlcg.html">
<table align = "center">
<tr>
<td>旧密码:</td>
<td>
<input type = "password" name = "jmm">
</td>
</tr>
<tr>
<td>新密码:</td>
<td>
<input type = "password" name = "xmm">
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type = "password" name = "qrmm">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type = "radio" name = sex checked>男
<input type = "radio" name = sex>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input name = "like" type = "checkbox" value = "music">音乐
<input name = "like" type = "checkbox" value = "dance">舞蹈
<input name = "like" type = "checkbox" value = "rap">说唱
<input name = "like" type = "checkbox" value = "basketball">篮球
</td>
</tr>
<tr>
<td>出生地:</td>
<td>
<select name = "space">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>青岛</option>
</select>
</td>
</tr>
<tr>
<td>
<input type = "button" onclick = check() value = "保存">
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改资料成功页面</title>
</head>
<body>
<form action = "dlcg.html">
<table align = "center">
<tr>
<td>修改资料成功</td>
</tr>
<tr>
<td>
<input type = "submit" value = "返回">
</td>
</tr>
</table>
</form>
</body>
</html>