HTML+CSS+JS设计注册页⾯HTML实战——设计⼀个个⼈信息填写界⾯
应⽤的技术:HTML+CSS+JS
CSS和JS是套⽤的模板，主要练习了表单的验证和正则表达式的使⽤
效果图:
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页⾯</title>
<link rel="stylesheet" href="../css/register.css">
</head>
<script src="../js/register.js"></script>
<script src="../js/jquery-3.5.1.js"></script>
<body>
<div class="rg_layout">
<div class="rg_header">
<p>填写个⼈信息</p>
</div>
<div class="rg_menu">
<!--        <table>-->
<!--            <tr>-->
<!--                <td><label><a href="">⽴即登录</a></label><td>-->
<!--                <td><label><a href="">庆祝主题</a></label><td>-->
<!--                <td><label><a href="">各项⼯作</a></label><td>-->
<!--                <td><label><a href="">⽤户注册</a></label><td>-->
<!--            </tr>-->
<!--        </table>-->
</div>
<div class="rg_section">
<div class="rg_form">
<!--定义表单 form-->
<form  action="success.html" id="form" method="get">
<table>
<tr>
<td class="td_left"><label for="userId">⽤户ID:</label></td>
<td class="td_right">
<input type="text" name="userId" id="userId" placeholder="请输⼊⽤户Id 6-8位" pattern="\w{6,8}">
<span id="s_userId" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="name">⽤户名:</label></td>
<td class="td_right">
<input type="text" name="name" id="name" placeholder="请输⼊⽤户名 2-10位" pattern="\w{2,10}">
<span id="s_name" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password1">⼝令:</label></td>
<td class="td_right">
<input type="password" name="password1" id="password1" placeholder="请输⼊⼝令 6-8位" pattern="\w{6,8}">
<span id="s_password1" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password2">确认⼝令:</label></td>
<td class="td_right">
<input type="password" name="password2" id="password2" placeholder="再次输⼊⼝令" pattern="\w{6,8}">
<span id="s_password2" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">⽣⽇:</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输⼊出⽣⽇期"></td>
</tr>
<tr>
<td class="td_left"><label for="xueli">学历:</label></td>
<td class="td_right"id="xueli">
<input type="radio" name="xueli" value="专科">专科
<input type="radio" name="xueli" value="本科">本科
<input type="radio" name="xueli" value="硕⼠">硕⼠
<input type="radio" name="xueli" value="研究⽣">研究⽣
<input type="radio" name="xueli" value="博⼠">博⼠
</td>
</tr>
<tr>
<td class="td_left"><label for="area">地区:</label></td>
<td class="td_right">
<select id="area">
<option value ="华南">华南</option>
<option value ="东北">东北</option>
<option value="西北">西北</option>
<option value="北京">北京</option>
</select>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">E-mail:</label></td>
<td class="td_right">
<input type="email" name="email" id="email" placeholder="请输⼊邮箱">
<span id="s_email" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="address">地址:</label></td>
<td class="td_right">
<input type="text" name="address" id="address" placeholder="请输⼊地址"></td>
</tr>
<tr>
<td class="td_left"><label for="Tel">电话:</label></td>
<td class="td_right">
<input type="text" name="Tel" id="Tel" placeholder="格式:123456" pattern="\w{6}">
<span id="s_Tel" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="comment">获奖经历:</label></td>
<td class="td_right"><input class="comment" type="text" name="comment" id="comment" placeholder="请输⼊内容"></td> </tr>
<tr>
<td id="td_reset"><input type="reset" id="btn_reset" value="重置"></td>
<td id="td_sub"><input type="submit" id="btn_sub" value="提交" onclick="check()"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_footer">
<p>已有账号?<a href="">⽴即登录</a></p>
<p>版权所有：天岁联系邮箱：1305536110@qq</p>
</div>
</div>
</body>
</html>
JS代码：
//1.给表单绑定onsubmit事件
// ElementById("form").onsubmit = function () {
//
//    return checkUserId() && checkName() && checkPassword1() && checkEmail() && checkPassword2() && checkTel(); // }
//分别绑定离焦事件
}
// 遍历学历
// function checkxueli() {
//    var xueli_list = ElementsByName("xueli");
//    for(var i=0;i<xueli_list.length;i++){
/
/        if(xueli_list[i].checked==true){
//            var xueli=xueli_list[i].value;
//            window.localStorage.setItem("xueli",xueli);
//        }
//    }
//    return true;
//    }
//注册跳转登录校验并设置键值
function check() {
var flag1 = checkUserId();
var flag2 = checkPassword1();
var flag3 = checkPassword2();
var flag4 = checkEmail();
var flag5 = checkName();
var flag6 = checkTel();
if (flag1 && flag2 && flag3&&flag4&&flag5&&flag6 ) {
//alert("注册成功，跳转个⼈主页");
//获取对应值
var userId = ElementById("userId").value;
var name = ElementById("name").value;
var password1 = ElementById("password1").value;
var birthday = ElementById("birthday").value;
var xueli = ElementsByName("xueli");
var area = ElementById("area").value;
var email = ElementById("email").value;
var address = ElementById("address").value;
var Tel = ElementById("Tel").value;
var comment = ElementById("comment").value;
//将userId的值存储在userid中，设置键值对
window.localStorage.setItem("userid",userId);
window.localStorage.setItem("name",name);
window.localStorage.setItem("password1",password1);
window.localStorage.setItem("birthday",birthday);
window.localStorage.setItem("xueli",xueli);
window.localStorage.setItem("area",area);
window.localStorage.setItem("email",email);
window.localStorage.setItem("address",address);
window.localStorage.setItem("Tel",Tel);
window.localStorage.setItem("comment",comment);
var xueli_list = ElementsByName("xueli");
for(var i=0;i<xueli_list.length;i++){
if(xueli_list[i].checked==true){
var xueli=xueli_list[i].value;
window.localStorage.setItem("xueli",xueli);
}
}
// //获取userId的值
// var userId = ElementById("userId").value;
// //将userId的值存储在userid中
// window.localStorage.setItem("userid",userId);//键值
return true;
}
else {
return false;
}
}
//校验⽤户Id
function checkUserId() {
//1.获取⽤户名的值
var userId = ElementById("userId").value;
//2.定义正则表达式
var reg_userId = /^\w{6,8}$/;
//3.判断值是否符合正则的规则
var flag = st(userId);
//4.提⽰信息
var s_userId = ElementById("s_userId");
if (flag) {
//提⽰绿⾊对勾
s_userId.innerHTML = "<img width='35' height='25' src='../img/gou.png'/>";
return true;
} else {
//提⽰红⾊⽤户名有误
s_userId.innerHTML = "⽤户名格式有误";
return false;
}
return flag;
}
/
/校验⽤户名
function checkName() {
//1.获取⽤户名的值
var name = ElementById("name").value;
//2.定义正则表达式
var reg_name = /^\w{2,10}$/;
//3.判断值是否符合正则的规则
var flag = st(name);
//4.提⽰信息
var s_name = ElementById("s_name");
if (flag) {
/
/提⽰绿⾊对勾
s_name.innerHTML = "<img width='35' height='25' src='../img/gou.png'/>";
return true;
} else {
//提⽰红⾊⽤户名有误
s_name.innerHTML = "⽤户名格式有误";
return false;
}
return flag;
}
//校验⼝令
function checkPassword1() {
//1.获取⽤户名的值
var password1 = ElementById("password1").value;
//2.定义正则表达式
var reg_password1 = /^\w{6,8}$/;
//3.判断值是否符合正则的规则
var flag = st(password1);
//4.提⽰信息
var s_password1 = ElementById("s_password1");
if (flag) {
//提⽰绿⾊对勾
s_password1.innerHTML = "<img width='35' height='25' src='../img/gou.png'/>";
return true;
} else {
//提⽰红⾊⽤户名有误
s_password1.innerHTML = "⼝令格式有误";
return false;
}
return flag;
}
//确认⼝令
function checkPassword2() {
/
/1.获取⽤户名的值
var password1 = ElementById("password1").value;
var password2 = ElementById("password2").value;
//2.定义正则表达式
var reg_password2 = /^\w{6,8}$/;
//3.判断值是否符合正则的规则
var flag = st(password2);
//4.提⽰信息
var s_password2 = ElementById("s_password2");
if (flag) {
if(password1==password2){  //判断两个⼝令是否⼀致
/
/提⽰绿⾊对勾
s_password2.innerHTML = "<img width='35' height='25' src='../img/gou.png'/>";
return true;
}else
{
return false;
}
} else {
//提⽰红⾊⽤户名有误
s_password2.innerHTML = "两次输⼊⼝令不⼀致";
return false;
}
return flag;
}
//校验邮箱
function checkEmail() {
//1.获取email的值
var email = ElementById("email").value;
//2.定义正则表达式
var reg_email = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
//3.判断是否符合正则的规则
var flag = st(email);
/
/4.提⽰信息
var s_email = ElementById("s_email");
if (flag) {
//提⽰绿⾊对勾
s_email.innerHTML = "<img width='35' height='25' src='../img/gou.png'/>";
return true;
} else {
//提⽰红⾊⽤户名有误
s_email.innerHTML = "邮箱格式有误";
return false;
}
return flag;
}
//校验Tel
function checkTel() {
//1.获取Tel的值
网页界面设计代码var Tel = ElementById("Tel").value;
//2.定义正则表达式
var reg_Tel =/^\w{6}$/;
//3.判断是否符合正则的规则
var flag = st(Tel);
//4.提⽰信息
var s_Tel = ElementById("s_Tel");
if (flag) {
//提⽰绿⾊对勾
s_Tel.innerHTML = "<img width='35' height='25' src='../img/gou.png'/>";
return true;
} else {
//提⽰红⾊⽤户名有误
s_Tel.innerHTML = "电话格式有误";
return false;
}
return flag;
}
success.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>success</title>
<link rel="stylesheet" href="../css/success.css">
</head>
<body>
<!--        <table  border="$1" >
<tr>
<td id="buttom"><input type="button" id="btn" value="显⽰信息" onclick="a()"></td>
</tr>
</table> -->
<div id="all">
<div align="center">
<p><lable><h2>个⼈信息</h2></lable></p>
</div>
<div id="login_frame" align="center">
<form>
<p><label class="label_input">⽤户ID:</label><input disabled type="text" id="userId" class="text_field"/></p>
<p><label class="label_input">⽤户名:</label><input disabled type="text" id="name" class="text_field"/></p>
<!-- <p><label class="label_input">⼝令:</label><input disabled type="text" id="password1" class="text_field"/></p> -->                    <p><label class="label_input">⽣⽇:</label><input disabled type="text" id="birthday" class="text_field"/></p>
<p><label class="label_input">学历:</label><input disabled type="text" id="xueli" class="text_field"/></p>
<p><label class="label_input">地区:</label><input disabled type="text" id="area" class="text_field"/></p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。