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和Bytemd用120行代码实现一个桌面版Markdown编辑器
前提某一天点开掘金的写作界面的时候,发现了内置Markdown编辑器有一个Github的图标,点进去就是一个开源的Markdown编辑器项目bytemd(https://github.com/byt ...
Tengine2.3+openssl1.1.1支持TLS1.3
安装包下载: openssl1.1.1 链接:https://pan.baidu.com/s/1-qCDhkLtlkT0fdwKdVuh2g 提取码:0ncc pcre3.2.1 链接:https:/ ...
Spring学习03（Bean的自动装配）
6.Bean的自动装配 6.1 自动装配说明自动装配是使用spring满足bean依赖的一种方法 spring会在应用上下文中为某个bean寻找其依赖的bean. Spring中bean的三种装配机 ...
【笔记】matplotilb数据可视化基础
matplotilb基础 matplotilb是我们使用的一个基础的可视化方法一般来说,使用matplotilb是较为专业的绘制图形的选择不需要很专业的时候可以只是用matplotilb的子模块p ...
DVWA－全等级XSS（反射型、存储型）
DVWA简介 DVWA(Damn Vulnerable Web Application)是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用,旨在为安全专业人员测试自己的专业技能和工具提供合法 ...
Flink项目实战（一）---核心概念及基本使用
前言.flink介绍: Apache Flink 是一个分布式处理引擎,用于在无界和有界数据流上进行有状态的计算.通过对时间精确控制以及状态化控制,Flink能够运行在任何处理无界流的应用中,同时对有 ...
分布式redis自增
redis+springboot RedisUtil.java package com.meeno.chemical.common.redis; import java.util.Date; impo ...
java批量下载文件为zip包
批量下载文件为zip包的工具类 package com.meeno.trainsys.util; import javax.servlet.http.HttpServletRequest; impor ...
C#中的垃圾回收
技术调研，IDEA 插件怎么开发「脚手架、低代码可视化编排、接口生成测试」？
作者:小傅哥博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言不踩些坑,根本不是成熟的码农! 你觉得肯德基全家桶是什么?一家人一起吃的桶吗,就那么 ...

HTML+CSS+JS设计注册页面

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

随机推荐

热门专题