验证注册页面信息（JavaScript）

1. 任务要求1）正则表达式的使用；2）如何获取表单元素？3）函数的应用；4）掌握String对象的创建；5）掌握String对象的常用方法；6）表单验证的方法。2. 需求说明根据所给素材制作注册页面，使用JavaScript制作文本提示特效，验证页面数据的有效性，要求如下：（1）使用表单form的onsubmit事件，根据验证函数的返回值是true或false来决定是...

今天我学习

11026人浏览 · 2021-07-19 18:00:14

今天我学习 · 2021-07-19 18:00:14 发布

1. 任务要求

1）正则表达式的使用；

2）如何获取表单元素？

3）函数的应用；

4）掌握String对象的创建；

5）掌握String对象的常用方法；

6）表单验证的方法。

2. 需求说明

根据所给素材制作注册页面，使用JavaScript制作文本提示特效，验证页面数据的有效性，要求如下：

（1）使用表单form的onsubmit事件，根据验证函数的返回值是true或false来决定是否提示表单。

（2）用户名不能为空，长度为4-12个字符，并且用户名只能由字母、数字和下划线组成。

（3）密码长度为6-12个字符，两次输入的密码必须一致。

（4）必须选择性别。

（5）电子邮箱地址不能为空，并且必须合法。

（6）错误提示信息显示在对应表单元素的后面，例如，若用户名不正确时，在文本框后进行提示，如图所示。

3. 实现思路

1）给各文本框设置id属性，并在其后面添加div用于显示提示信息。

2）获取表单元素值，这些值都是字符串类型。

3）定义满足需求的正则表达式。

4）使用正则表达式的方法验证用户输入的信息是否正确。

5）表单提交时使用onsubmit事件触发验证函数，根据判断返回相应信息。

4. 实现代码（JS）

1）建立函数。用户名验证函数checkUser（）、密码验证函数checkPwd（）、确认密码验证函数checkRepwd（）、电子邮箱验证函数checkEmail（），以及注册成功后函数test（）。

2）使用正则表达式reg.test()，判断输入的用户名、密码、确认密码或电子邮箱是否符合规范。

3）如果符合要求的输入，返回true，否则提示规范输入应该是什么样的并return false。

4）当所有信息注册完才能进入注册成功界面，所以test()函数需要对前面的函数进行判断，如果信息有错或未符合要求输入，则可以使用alert()提示。

// JavaScript Document
// 用户名
function checkUser(){
	var user=document.getElementById("user").value;
	var reg=/^\w{4,12}$/;
	if (!reg.test(user)){
		document.getElementById("userId").innerHTML="<img src='img/error.png'/>由字母、数字和下划线组成的4-16位字符";
		return false;
	}
	document.getElementById("userId").innerHTML="<img src='img/ok.png'/>";
	return true;
}
//密码
function checkPwd(){
	var pwd=document.getElementById("pwd").value;
	var reg=/^[a-zA-Z0-9]{4,12}$/;
	var reg1=/^\d{4,12}$/;
	if (!reg.test(pwd)){
		document.getElementById("pwdId").innerHTML="<img src='img/error.png'/>密码长度为6-12个字符";
		return false;
	}
	if (reg1.test(pwd)){
		document.getElementById("pwdId").innerHTML="<img src='img/error.png'/>密码设置太简单";
		return false;
	}
	document.getElementById("pwdId").innerHTML="<img src='img/ok.png'/>";
	return true;
}
//确认密码
function checkRepwd(){
	var repwd=document.getElementById("repwd").value;
	var pwd=document.getElementById("pwd").value;
	if (pwd!=repwd){
		document.getElementById("repwdId").innerHTML="<img src='img/error.png'/>两次输入的密码不一致";
		return false;
	}
	document.getElementById("repwdId").innerHTML="<img src='img/ok.png'/>";
	return true;
}
//电子邮箱
function checkEmail(){
	var email=document.getElementById("email").value;
	var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
	if (!reg.test(email)){
		document.getElementById("emailId").innerHTML="<img src='images/error.png'/>Email格式不正确,例如web@sohu.com";
		return false;
	}
	document.getElementById("emailId").innerHTML="<img src='images/ok.png'/>";
	return true;
}
function test(){
	if (!checkUser()||!checkEmail()||!checkPwd()||!checkRepwd()){
		alert("请将注册信息填写完整！");
		return false;
	}
	return true;
}

5. 运行结果

6. 其他代码（.html/css）

其中的图片需要自己设定！！！（下面有模板图片）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度注册页面</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/register.js"></script>
</head>

<body>
<div class="center"><img src="img/header1.jpg" width="600px" height="100px"/></div>
<div class="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <form action="success.html" method="get" name="myform" onsubmit="return test()"> 
  <tr>
    <td class="left">用户名：</td>
    <td><input id="user" type="text"  class="inputs" onchange="checkUser()"/><div id="userId" class="red"></div></td>
  </tr>
   <tr>
    <td class="left">密码：</td>
    <td><input id="pwd" type="password"  class="inputs" onchange="checkPwd()"/><div id="pwdId" class="red"></div></td>
  <tr>
    <td class="left">确认密码：</td>
    <td><input id="repwd" type="password"  class="inputs" onchange="checkRepwd()"/><div id="repwdId" class="red"></div></td>
  </tr>
  <tr>
   <tr>
    <td class="left">性别：</td>
    <td><div style="float:left;"><input name="sex" type="radio" value="男" checked/>男 <input name="sex" type="radio" value="女" />女</div>
    <div id="sexId" class="red"></div></td>
  </tr>
   <tr>
    <td class="left">电子邮件地址</td>
    <td><input id="email" type="text"  class="inputs" onchange="checkEmail()"/><div id="emailId" class="red"></div></td>
  </tr>
   <tr>
    <td class="left">出生日期：</td>
    <td><select id="year">
    <script type="text/javascript">
	for(var i=1900;i<=2009;i++){
		document.write("<option value="+i+">"+i+"</option>");	
	}
	</script>
    </select>年
    <select id="month">
    <script type="text/javascript">
	for(var i=1;i<=12;i++){
		document.write("<option value="+i+">"+i+"</option>");	
	}
	</script>
    </select>月
    <select id="day">
    <script type="text/javascript">
	for(var i=1;i<=31;i++){
		document.write("<option value="+i+">"+i+"</option>");	
	}
	</script>
    </select>日</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="sub" type="submit" value="注册" /> <input name="cancel" type="reset" value="清除" /></td>
  </tr>
  </form>
</table>
</div>
</body>
</html>

success.html部分代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注册成功</title>
<style type="text/css">
body{
	margin:0;
	text-align:center;
	font-size:24px;
	font-weight:bold;
	background-image: url(img/background1.jpg);
}
</style>
</head>
<body>
<img src="img/top.jpg" width="600px height="100px"/><br />
欢迎您注册成为百度用户!
</body>
</html>

.css部分代码如下：（url部分的代码需要注意一下）

*{padding:0; margin:0;}
body{
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-size:12px;
	line-height:30px;
	background-image: url(../img/background1.jpg);//url调用的图片需要自己设置或者删除这句话
}
td div img{
	width:20px;	
}
.center{
	float:none;
	width: 503px;
	clear:both;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 100px;
}
.inputs {
	border: 1px solid #333;
	width:120px;
	float:left;
}
.left{width:120px;
text-align:right;
padding-right:5px;
}
.red{
	color:#ff0000;
	padding-left:10px;
	font-size:12px;
}

代码中需要的主要图片以及命名方式如下：