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的 ...

随机推荐

JAVA基础语法：函数(方法)、类和对象（转载）
4.JAVA基础语法:函数(方法).类和对象函数在java中函数也称为方法,是一段具备某种功能的可重用代码块. 一个函数包括这几部分: 函数头函数头包括函数访问修饰符,函数返回值类型, 函数名, ...
Docker部署ELK之部署logstash7.6.0（4）
前言: logstash 和filebeat都具有日志收集功能,filebeat更轻量,占用资源更少,但logstash 具有filter功能,能过滤分析日志.一般结构都是filebeat采集日志,然 ...
使用POI把查询到的数据表数据导出到Excel中,一个表一个sheet.最详细!!!
一.需求我们会遇到开发任务: 经理:小王,你来做一下把数据库里的数据导出到Excel中,一个表是一个sheet,不要一个表一个Excel. 小王:好的,经理.(内心一脸懵逼) 二.前期准备首先我们 ...
Python - typing 模块 —— NewType
前言 typing 是在 python 3.5 才有的模块前置学习 Python 类型提示:https://www.cnblogs.com/poloyy/p/15145380.html 常用类型提示 ...
Docker创建Docker-Registry客户端docker-registry-frontend
docker-compose.yml version: '3.1' services: frontend: image: konradkleine/docker-registry-frontend:v ...
安装 iperf和服务器之间测速
安装 # https://downloads.es.net/pub/iperf/iperf-3.1.3.tar.gz wget https://iperf.fr/download/source/ipe ...
.static 和const分别怎么用，类里面static和const可以同时修饰成员函数吗。
static的作用: 对变量: 1.局部变量: 在局部变量之前加上关键字static,局部变量就被定义成为一个局部静态变量. 1)内存中的位置:静态存储区 2)初始化:局部的静态变量只能被初始化一次, ...
CentOS8安装jdk1.8
安装方法 CentOS8上使用 yum 直接安装,环境变量自动配置好查看是否已安装看到下面结果,说明已经安装配置 jdk [root@iZ2ze8crquorxf6c7l0eluZ ~]# jav ...
jQuery中的筛选（六）：first()、last()、has()、is()、find()、siblings()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
刷题-力扣-541. 反转字符串 II
541. 反转字符串 II 题目链接来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/reverse-string-ii 著作权归领扣网络所有. ...

HTML+CSS+JS设计注册页面

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

随机推荐

热门专题