效果图
用到的图片
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("../image/register_bg.png") no-repeat center;
}
*{
margin:0px;
border:0px;
box-sizing: border-box;
}
.rg_layout{
width: 900px;
height: 500px;
border: 10px solid #EEEEEE;
background: white;
margin: auto;
margin-top: 30px;
padding: 20px;
}
.rg_left{
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
width: 500px;
float: left;
}
.rg_right{
float: right;
margin:10px;
}
.rg_right > p:last-child{
font-size: 5px;
}
.rg_right p a {
color: pink;
}
.td_left{
text-align: right;
width: 100px;
height: 50px;
}
.shurukuang,#birthday,#register{
margin-left: 30px;
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
#register{
width: 150px;
}
#xingbie{
padding-left: 30px;
}
#jpg_code{
width: 90px;
height: 32px;
border-radius: 5px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
#bt_zhuce{
padding-left: 135px;
}
.error{
color: red;
font-size: 10px;
}
</style>
<script>
//给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果
//定义一些方法分别校验各个表单项
window.onload = function(){
document.getElementById("form").onsubmit=function(){
var flag1=checkusername();
var flag2=checkpassword();
var flag3=checktel();
var flag4=checkemail();
var flag5=checkname();
return flag1&&flag2&&flag3&&flag4&&flag5;
}
//给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkusername;
document.getElementById("password").onblur = checkpassword;
document.getElementById("email").onblur = checkemail;
document.getElementById("tel").onblur = checktel;
document.getElementById("name").onblur = checkname;
}
function checkpassword(){
let password = document.getElementById("password").value;
var reg_password=/^\w{6,12}$/;
var flag_password =reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag_password){
s_password.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_password.innerHTML="密码在6-12位之间";
}
return flag_password;
}
function checkusername(){
let username = document.getElementById("username").value;
var reg_username=/^\w{6,12}$/;
var flag_username =reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag_username){
s_username.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_username.innerHTML="用户名长度在6-12位";
}
return flag_username;
}
function checkemail(){
let email = document.getElementById("email").value;
var reg_email=/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$/;
var flag_email =reg_email.test(email);
var s_email = document.getElementById("s_email");
if(flag_email){
s_email.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_email.innerHTML="邮箱格式有误";
}
return flag_email;
}
function checktel(){
let tel = document.getElementById("tel").value;
var reg_tel=/^\d{11}$/;
var flag_tel =reg_tel.test(tel);
var s_tel = document.getElementById("s_tel");
if(flag_tel){
s_tel.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_tel.innerHTML="手机号需要11位数字";
}
return flag_tel;
}
function checkname(){
let name = document.getElementById("name").value;
var reg_name=/^\w{6,12}$/;
var flag_name =reg_name.test(name);
var s_name = document.getElementById("s_name");
if(flag_name){
s_name.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_name.innerHTML="请填写6-12位字符";
}
return flag_name;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<form action="#" id="form" method="get">
<table>
<tr>
<td class="td_left">用户名</td>
<td><input type="text" class="shurukuang" id="username" placeholder="请输入用户名"> </td>
<td><span id="s_username" class="error"></span></td>
</tr>
<tr>
<td class="td_left">密码</td>
<td><input type="text" class="shurukuang" id="password" placeholder="请输入密码"> </td>
<td><span id="s_password" class="error"></span></td>
</tr>
<tr>
<td class="td_left">Email</td>
<td><input type="text" class="shurukuang" id="email" placeholder="请输入邮箱账号"> </td>
<td><span id="s_email" class="error"></span></td>
</tr>
<tr>
<td class="td_left">姓名</td>
<td><input type="text" class="shurukuang" id="name" placeholder="请输入真实姓名"> </td>
<td><span id="s_name" class="error"></span></td>
</tr>
<tr>
<td class="td_left">手机号</td>
<td><input type="text" class="shurukuang" id="tel" placeholder="请输入手机号"> </td>
<td><span id="s_tel" class="error"></span></td>
</tr>
<tr>
<td class="td_left">性别</td>
<td id="xingbie"><input type="radio" name="gender" id="male"> 男
<input type="radio" name="gender" id="female"> 女</td>
<td><span id="s_sex" class="error"></span></td></tr>
<tr>
<td class="td_left">出生日期</td>
<td><input type="date" id="birthday"> </td>
<td><span id="s_date" class="error"></span></td>
</tr>
<tr>
<td class="td_left">验证码</td>
<td><input type="text" id="register" width="100px" height="30px">
<img src="../image/verify_code.jpg" id="jpg_code"></td>
<td><span id="s_yanzheng" class="error"></span></td>
</tr>
<tr>
<td colspan="2" id="bt_zhuce"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
<div class="rg_right">
<p>已有帐号？<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
遇到的问题
- 邮箱的正则表达式自以为写得没错，但还是出错
- 取id名有些混乱，导致后面编写有些困难