文章目录
功能需求
- 实现用户注册界面。(自定义CSS样式)
- 实现表单验证。(使用Javascript正则表达式)
结果展示
- 默认状态:
- 输入提交:
- 功能:用户名 / 手机号 / 身份证号 / 电子邮箱 校验
- 默认状态(点击)
- 不符合要求(鼠标移出)
- 符合要求(鼠标移出)
- 功能:密码强度校验
-
弱密码
-
中密码
-
强密码
源代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<style type="text/css">
/*基本布局容器*/
div{
position: absolute;
width: 100%;
height: 100%;
float: left;
}
header{
width: 100%;
height: 20%;
border-bottom: 1px solid #ccc;
}
header>h1{
width: 100%;
height: 50%;
margin: unset;
padding: unset;
font-size: 60px;
text-align: center;
}
header>h1>a{
color: #b92c28;
}
header>a{
position: absolute; /*绝对布局:居右*/
top: 80px;
right: 10px;
}
header>a>b{
color: red;
}
section{
width: 70%;
height: 70%;
margin-left: 32%;
}
footer{
width: 100%;
height: 10%;
border-top: 1px solid #ccc;
padding-top: 10px;
color: #ccc;
text-align: center;
}
/*表格*/
table{
width: 100%;
height: 100%;
}
.info{
width: 20%;
text-align: right;
}
.input{
width: 20%;
}
.warning{
/*默认透明:不显示*/
width: 60%;
color: transparent;
}
.submit{
width: 80%;
height: 70%;
border-radius: 10px;
border-color: transparent;
outline: 0;
color: white;
font-size: large;
background-color: #d9534f;
}
/*密码校验框*/
.plex{
position: absolute;
width: 50px;
height: 25px;
margin-top: -10px;
border-radius: 5px;
color: black;
text-align: center;
}
/*提交按钮的样式切换*/
.submitCurrent:hover{
background-color: #ff534f;
}
.submitOn