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.com</p>

    </div>

</div>

</body>

</html>

JS代码：

window.onload = function () {

    //1.给表单绑定onsubmit事件

    // document.getElementById("form").onsubmit = function () {

    //

    //     return checkUserId() && checkName() && checkPassword1() && checkEmail() && checkPassword2() && checkTel();

    // }

    //分别绑定离焦事件

    document.getElementById("userId").onblur = checkUserId;

    document.getElementById("name").onblur = checkName;

    document.getElementById("password1").onblur = checkPassword1;

    document.getElementById("password2").onblur = checkPassword2;

    document.getElementById("email").onblur = checkEmail;

    document.getElementById("Tel").onblur = checkTel;

}

// 遍历学历

// function checkxueli() {

//     var xueli_list = document.getElementsByName("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 = document.getElementById("userId").value;

        var name = document.getElementById("name").value;

        var password1 = document.getElementById("password1").value;

        var birthday = document.getElementById("birthday").value;

        var xueli = document.getElementsByName("xueli");

        var area = document.getElementById("area").value;

        var email = document.getElementById("email").value;

        var address = document.getElementById("address").value;

        var Tel = document.getElementById("Tel").value;

        var comment = document.getElementById("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 = document.getElementsByName("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 = document.getElementById("userId").value;

        // //将userId的值存储在userid中

        // window.localStorage.setItem("userid",userId);//键 值

        return true;

    }

    else {

        return false;

    }

}

//校验用户Id

function checkUserId() {

    //1.获取用户名的值

    var userId = document.getElementById("userId").value;

    //2.定义正则表达式

    var reg_userId = /^\w{6,8}$/;

    //3.判断值是否符合正则的规则

    var flag = reg_userId.test(userId);

    //4.提示信息

    var s_userId = document.getElementById("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 = document.getElementById("name").value;

    //2.定义正则表达式

    var reg_name = /^\w{2,10}$/;

    //3.判断值是否符合正则的规则

    var flag = reg_name.test(name);

    //4.提示信息

    var s_name = document.getElementById("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 = document.getElementById("password1").value;

    //2.定义正则表达式

    var reg_password1 = /^\w{6,8}$/;

    //3.判断值是否符合正则的规则

    var flag = reg_password1.test(password1);

    //4.提示信息

    var s_password1 = document.getElementById("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 = document.getElementById("password1").value;

    var password2 = document.getElementById("password2").value;

    //2.定义正则表达式

    var reg_password2 = /^\w{6,8}$/;

    //3.判断值是否符合正则的规则

    var flag = reg_password2.test(password2);

    //4.提示信息

    var s_password2 = document.getElementById("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 = document.getElementById("email").value;

    //2.定义正则表达式

    var reg_email = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

    //3.判断是否符合正则的规则

    var flag = reg_email.test(email);

    //4.提示信息

    var s_email = document.getElementById("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 = document.getElementById("Tel").value;

    //2.定义正则表达式

    var reg_Tel =/^\w{6}$/;

    //3.判断是否符合正则的规则

    var flag = reg_Tel.test(Tel);

    //4.提示信息

    var s_Tel = document.getElementById("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;

}

HTML+CSS+JS设计注册页面的更多相关文章

NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源
NanUI文档目录 NanUI简介开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源使用网页来设计整个窗口如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
JavaWEB开发02——CSS&JS
今日目标使用CSS完成网站首页的优化使用CSS完成网站注册页面的优化使用JS完成简单的数据校验使用JS完成图片轮播效果教学目标: 了解CSS的概念了解CSS的引入方式了解CSS的基本用法 ...
前端小白页面开发注意事项及小工具（html\css\js）
技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
【7】使用css/js/html模板来实现一个注册、登录和管理的功能
分支:auth static添加文件 css文件夹: app.css 自定义css样式[*] bootstrap.min.cs bootstrap样式 compomemts文件夹: 插件用 ...
HTML&CSS基础学习笔记1.22-简单的注册页面
一个简单的注册页面表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...
node.js实现简单的登录注册页面
首先需要新建四个文件一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...
Django注册页面配置设计
一.上次回顾 Django数据的增查改删 models 中有userInfo 三个字段 user password phonenumber,models.userInfo.objects.all(). ...
微信小程序-06-详解介绍.js 逻辑层文件-注册页面
上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面微信小程序-06-详解介绍.js 逻辑层文件-注册页面宝典官方文档: http ...
TMS WEB CORE直接从HTML&CSS设计的页面布局
TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

随机推荐

Devcpp（Dev-C++）代码编辑的快捷键
转自:https://blog.csdn.net/u010940020/article/details/43735549 这里记录一些个人使用Devcpp时,摸索出来的代码编辑快捷键,感觉非常有用.如 ...
SpringBoot开发十五-发布帖子
需求介绍使用 AJAX 异步通信实现网页能够增量的更新呈现到页面上而不需要刷新整个页面. 现在基本上都是服务器返回 JSON 字符串来解析代码实现使用 JQuery 发送 AJAX 请求. 首先 ...
RPM包方式安装Oracle21c的方法
RPM包方式安装Oracle21c的方法前言北京时间2021.8.14 Oracle发布了最新的数据库版本Oracle21c, Oracle规划不再发布Oracle20c和Oracle22c, 直 ...
DVWA（二）： Brute Force（全等级暴力破解）
tags: DVWA Brute Force Burp Suite Firefox windows2003 暴力破解基本利用密码字典使用穷举法对于所有的账号密码组合全排列猜解出正确的组合. LEVEL ...
Echarts 图表位置调整
Echarts 图表的位置调整折线图和柱状图,通过grid属性调整. grid:{ show:false, top:'20%', right:'5%', bottom:'10%', left:'10 ...
Django ORM多表查询
基于双下划线查询根据存的时候,字段的数据格式衍生的查询方法 1.年龄大于35岁 res = models.AuthorDetails.objects.filter(age__lt=80) print ...
idea打断点后发现被标记的断点处那一行整行被标记了其他颜色，前面没有断点标识的红点
问题如下: 最后发现有两种解决办法吧,直接走起! 第一种方法: 在View====>Active Editor====>Show Gutter Icons,勾选此选项,发现小红点出来了: ...
浅谈模拟彩票代码，html,javascript
今天简单介绍一下用html,javascript来模拟双色球彩票选择器. 双色球彩票规则:由6个红球和1个蓝球组成,其中6个红球是从1-33中随机选出的不重复的6个数,从小到大一次排列:蓝球是1-16 ...
十七：使用JDBC处理MySQL大数据
一.基本概念大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 在实际开发中,有时 ...
SpringBoot快速入门（必知必会）
是什么?能做什么 SpringBoot必知必会是什么?能做什么 SpringBoot是一个快速开发脚手架快速创建独立的.生产级的基于Spring的应用程序 SpringBoot必知必会快速创建应 ...

HTML+CSS+JS设计注册页面

HTML+CSS+JS设计注册页面的更多相关文章

随机推荐

热门专题