您的位置：首页 > Web前端 > JavaScript

JavaScript简单的页面注册

2013-03-21 22:02 351 查看

要求：

1.首页index.html：点击注册按钮，跳转到注册页

2.注册页reg.html：检查输入是否符合要求，若符合，则进入到跳转页；不符合，不跳转

3.跳转页msg.html：显示注册成功，3（2、1）秒后返回首页

index.html



<html>
<head><title>首页</title></head>

<style type="text/css">
h2 {display : inline}	//h2标题不换行
</style>

<body>
<center>
<h1>欢迎来到首页！</h1>
<a href=""><h2>登陆</h2></a>
<a href="reg.html"><h2>注册</h2></a>
<center>
</body>
</html>

reg.html



<html>
<head>
<title>新用户注册</title>
<script src="form.js"></script>
</head>
<body>
<form action="msg.html" name="regForm">
<table align="center">
<caption><h2>新用户注册</h2></caption>
<tr>
<td width="50%" align="right">用 户 名：</td>
<td><input type="text" name="username" onBlur="ckUsername()">
<span id="usernameResult"></span>
</td>
</tr>

<tr>
<td align="right">密    码：</td>
<td><input type="password" name="pwd1" onBlur="ckPwd1()">
<span id="pwd1Result"></span>
</td>
</tr>

<tr>
<td align="right">确认密码：</td>
<td><input type="password" name="pwd2" onBlur="ckPwd2()">
<span id="pwd2Result"></span>
</td>
</tr>

<tr>
<td colspan="2" align="center">
<input type="button" value="注册" onClick="mySubmit()">
<input type="button" value="重置" onClick="myReset()">
</td>
</tr>
</table>
</form>
</body>
</html>

注册页reg.html中的form.js

function ckUsername() {
var username = document.forms["regForm"].username.value;
var usernameResult = document.getElementById("usernameResult");
if(username.length<6 || username.length>12) {
usernameResult.innerHTML = "<font color='red'>用户名必须在6—12个字符之间</font>";
return false;
}else{
usernameResult.innerHTML = "<font color='green'>用户名可用</font>";
return true;
}
}

function ckPwd1() {
var pwd1 = document.forms["regForm"].pwd1.value;
var pwd1Result = document.getElementById("pwd1Result");
if(pwd1.length<6 || pwd1.length>12) {
pwd1Result.innerHTML = "<font color='red'>密码必须在6—12个字符之间</font>";
return false;
}else{
pwd1Result.innerHTML = "<font color='green'>密码可用</font>";
return true;
}
}

function ckPwd2() {
var pwd1 = document.forms["regForm"].pwd1.value;
var pwd2 = document.forms["regForm"].pwd2.value;
var pwd2Result = document.getElementById("pwd2Result");
if(pwd2.length<6 || pwd2.length>12) {
pwd2Result.innerHTML = "<font color='red'>密码必须在6—12个字符之间</font>";
return false;
}else if(pwd1 != pwd2) {
pwd2Result.innerHTML = "<font color='red'>密码不一致，请重新输入</font>";
return false;
}else{
pwd2Result.innerHTML = "<font color='green'>密码一致，请继续</font>";
return true;
}
}

function mySubmit() {
if(ckUsername() && ckPwd1() && ckPwd2()) {
document.forms["regForm"].submit();
}
}

function myReset() {
if(window.confirm("是否重新注册？单击“确定”继续，单击“取消”停止。")) {
document.forms["regForm"].reset();
document.getElementById("usernameResult").innerHTML="";
document.getElementById("pwd1Result").innerHTML="";
document.getElementById("pwd2Result").innerHTML="";
}
}

msg.html







<html>
<head>
<title>跳转页</title>
<script>
function forward() {
var callA = window.setInterval("a()", 1000);	//每隔一秒调用方法a()
}
function a() {
var objTime = document.getElementById("time");
var time = objTime.innerText;
time--;
objTime.innerText = time;
if(time==0) {
window.clearInterval("callA");	//终止对方法a()的调用
window.location="index.html";
}
}
</script>
</head>
<body onLoad="forward()">
<h1 align="center">注册成功！<span id="time">3</span>秒后跳转到首页...</h1>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航