验证注册页面信息（JavaScript）

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;
}

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

error.png

ok.png

header1.png

top.png

验证注册页面信息（JavaScript）相关推荐

JS项目（验证注册页面信息）
JS项目设计如下图所示的页面,各文本框输入信息在失去焦点时验证,如果输入有误,在文本框后面提示错误信息,各文本框输入信息的具体要求如下: (1) 用户名是由 4 ~ 16 位字符组成,不能包含数字, ...
JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位验证邮箱符合规则,并且不能为空重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
java验证注册页面_Java使用正则表达式对注册页面进行验证功能实现
本文给大家介绍java使用正则表达式对注册页面进行验证的代码,代码如下所示: package regex; import java.util.Scanner; import java.util.reg ...
jsp java servlet_jsp+java ，servlet如何实现用户登录和注册页面
jsp+java servlet实现简单用户登录(使用数据库,包括注册页面) 功能介绍本项目通过使用jsp和servlet实现简单的用户登录.主要逻辑为:如果用户不存在,则首先进行注册(注册信息同步 ...
php 判断用户是否刷新,如何在php和ajax中创建一个注册页面，它会在不刷新页面的情况下检查某个用户名是否已经存在？ - php...
我有一个register.php文件,它为我的网站创建了新用户.但是,如果某人使用已经存在的用户名,则仅当他输入整个表单并提交时才会生成错误.如何实现Ajax / Jquery以在不提交表单的情况下显 ...
Javascript注册页面验证登录
Javascript注册页面验证登录连接数据库. 目前登录功能好像出问题了,用不了数据库注册的信息用于登录.由于时间的原因,以后再更改.个人笔记,不建议拿去用,因为还存在问题没有解决. (1)inde ...
JavaScript定义注册页面
项目场景: 考察如下: 获取字符串类型的表单数据使用字符串对象方法验证用户输入信息的合法性表单提交时使用onsubmit事件触发验证函数问题描述: (1)用户名是由英文字母和数字组成的4-16位 ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
使用html，css，javascript进行注册页面的实现
注册页面的实现功能实现一个用户注册页面实现表单校验功能效果图实现步骤 1) 创建Resign.html注册页面核心代码:  <div id=" ...

验证注册页面信息（JavaScript）

验证注册页面信息（JavaScript）相关推荐

最新文章

热门文章