实现效果图
实现效果
使用HTML编写页面结构，CSS美化界面，点击注册，跳转到注册界面，均为静态网页，是课上的一个小作业~
使用正则表达式对输入进行验证，包括邮箱格式验证，用户名格式验证。
正则表达式
-
字面值字符：例如字母、数字、空格等，可以直接匹配它们自身。
-
特殊字符：例如点号
.、星号*、加号+、问号?等，它们具有特殊的含义和功能。 -
字符类：用方括号
[ ]包围的字符集合，用于匹配方括号内的任意一个字符。 -
元字符：例如
\d、\w、\s等，用于匹配特定类型的字符，如数字、字母、空白字符等。 -
量词：例如
{n}、{n,}、{n,m}等，用于指定匹配的次数或范围。 -
边界符号：例如
^、$、\b、\B等，用于匹配字符串的开头、结尾或单词边界位置。
以上为菜鸟教程给出的基本概念
我用到的正则表达式还是很简单的代码中用到了^[a-zA-Z0-9 -]{6,16}表示输入格式要求长度为6到16的由大/小写字母、空格或者连字符-组成，其中\^表示匹配开始标识，为匹配结束标识。
代码实现
首先是登录界面index.html
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form>
<div class="user">
<input type="text" name="name" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
</div>
<div class="footer">
<input type="submit" name="submit" value="登录" class="btn">
<input type="submit" name="submit" value="注册" class="btn" formaction="register.html">
</div>
</form>
</body>
</html>登录界面样式文件login.css
css
body {
background: url(../images/dog.jpg) no-repeat center center fixed;
background-size: cover;
padding-top: 40px;
}
form {
width: 343px;
height: 200px;
margin: 0 auto;
border: 1px solid rgba(0, 0, 0, 1);
border-radius: 5px;
overflow: hidden;
text-align: center;
}
input {
width: 300px;
height: 30px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.5);
margin-bottom: 10px;
}
.user {
padding-top: 40px;
}
.footer input {
width: 50px;
height: 34px;
}
.btn {
border-radius: 4px;
border-radius: 6px;
}
input[type=submit] {
cursor: pointer;
}
input:focus {
background-color: rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.btn:hover {
background: rgba(0, 0, 0, 0.2);
}其次是register.html
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
<link rel="stylesheet" href="./css/register.css">
</head>
<body>
<div>
<form action="#" class="contact_form" method="post">
<ul>
<li class="usually">
<h2>用户注册</h2>
</li>
<li class="usually">
<label for="name">昵称：</label>
<!-- 用户名可以由大小写字母，0-9数字空格和连字符组成的长度为6-16的字符串 -->
<input type="text" name="name" id="name" autocomplete="off" required
pattern="^[a-zA-Z0-9 -]{6,16}$">
</li>
<li class="usually">
<label for="mail">注册邮箱：</label>
<!-- 用户名可以由大小写字母，0-9数字空格和连字符组成的长度为6-16的字符串 -->
<input type="email" name="mail" id="mail" required>
</li>
<li class="usually">
<label for="password">密码：</label>
<input type="password" name="password" id="password" autocomplete="off" required>
</li>
<li class="userselect">
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male" checked>
男
<input type="radio" id="female" name="gender" value="female">
女
</li>
<li class="usually">
<label for="age">年龄：</label>
<input type="text" name="age" id="age" autocomplete="off" required pattern="^[0-9]{1,2}$">
</li>
<li class="userselect">
<label for="hobby">兴趣爱好：</label>
<input type="checkbox" name="swim" id="swim" checked>
游泳
<input type="checkbox" name="climb" id="climb">
登山
<input type="checkbox" name="run" id="run">
跑步
<input type="checkbox" name="walk" id="walk">
散步
</li>
<li class="usually">
<label for="province">所在省份：</label>
<select name="province" id="province">
<option value="liaoning">辽宁</option>
<option value="shandong">山东</option>
<option value="zhejiang">浙江</option>
</select>
</li>
<li class="usually">
<label for="introduce">自我介绍：</label>
<textarea name="introduce" id="introduce" cols="30" rows="10"></textarea>
</li>
<li>
<input type="submit" name="submit" id="submit" value="立即注册">
</li>
</ul>
</form>
</div>
</body>
</html>注册界面的样式文件register.css
css
.contact_form {
width: 50%;
margin: 0 auto;
}
.contact_form ul {
width: 750px;
list-style: none;
margin: 0px;
padding: 0px;
}
.contact_form li {
padding: 12px;
border-bottom: 2px solid #eee;
}
.contact_form li:first-child,
.contact_form li:last-child {
border-bottom: 2px solid #777;
}
.contact_form .usually label {
width: 150px;
display: inline-block;
}
.contact_form .userselect label {
width: 150px;
display: inline-block;
}
.contact_form .usually input {
height: 20px;
width: 220px;
/* 上下5px 左右8px */
padding: 5px 8px;
}
*:focus {
outline: none;
}
.usually input,
.usually textarea {
background: url(../images/bg.jpeg) no-repeat 98% center;
box-shadow: 0 10px 15px #eee inset;
border-radius: 2px;
}
.contact_form textarea {
padding: 8px;
width: 300px;
}
/* 获得焦点的时候背景色设置为白色 */
.usually input:focus,
.usually textarea:focus {
background: #fff;
}
input[type=submit] {
margin-left: 156px;
background-color: #68b12f;
border: 1px solid #509111;
border-radius: 3px;
color: white;
padding: 6px 10px;
text-align: center;
}
input[type=submit]:hover {
opacity: .85;
cursor: pointer;
}
.usually input:focus:invalid,
.usually textarea:focus:invalid {
background-color: #d45252;
box-shadow: 0 0 5px #d45252;
}
.usually input:focus:valid,
.usually textarea:focus:valid {
background-color: #5cd053;
box-shadow: 0 0 5px #5cd053;
}总结
总体来说还是很简单的，有很多有趣的小样式。