HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）

news2025/2/27 2:45:49

>>> 本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。

要求

创建一个注册页面，如下图。

然后再对注册信息进行判断，判断其是否符合要求。（如：密码6-12位字符，不能有空格等）

图片素材如下：

注册页面的整个框架

注册页面框架分析

页面内容主要分为三个部分：

我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。

注册页面框架的实现

第一部分：两个段落文本

<!-- 左边部分 -->
<div class="rg_left">
    <p>新用户注册</p>
    <p>USER REGISTER</p>
</div>

第二部分：一个表单

<!-- 中间部分 -->
<div class="rg_center">
    <!-- 定义表单 form -->
    <form action="#" method="post">
        <!-- 定义一个表格 -->
        <table>
            <!-- 表格第一行有两个单元格：用户名 + 输入用户名信息区域 -->
            <tr>
                <!-- 定义一个标签：用户名 -->
                <td class="td_left"><label for="username">用户名</label></td>
                <!-- 定义输入用户名信息的框框 -->
                <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
            </tr>

            <!-- 表格第二行有两个单元格：密码 + 输入密码区域 -->
            <tr>
                <!-- 定义一个标签：密码 -->
                <td class="td_left"><label for="password">密码</label></td>
                <!-- 定义输入密码的框框 -->
                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
            </tr>

            <!-- 表格第三行有两个单元格：邮箱 + 输入邮箱区域 -->
            <tr>
                <!-- 定义一个标签：邮箱 -->
                <td class="td_left"><label for="email">Email</label></td>
                <!-- 定义输入邮箱的框框 -->
                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
            </tr>

            <!-- 表格第四行有两个单元格：姓名 + 输入姓名区域 -->
            <tr>
                <!-- 定义一个标签：姓名 -->
                <td class="td_left"><label for="name">姓名</label></td>
                <!-- 定义输入姓名的框框 -->
                <td class="td_right"><input type="text" name="name" id="name" 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="请输入手机号"></td>
            </tr>

            <!-- 表格第六行有两个单元格：性别 + 选择性别的按钮 -->
            <tr>
                <!-- 定义一个标签：性别 -->
                <td class="td_left"><label>性别</label></td>
                <!-- 定义两个选择按钮：一个按钮"男"，一个按钮"女" -->
                <td class="td_right">
                    <input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </td>
            </tr>

            <!-- 表格第七行有两个单元格：出生日期 + 选择出生日期控件 -->
            <tr>
                <!-- 定义一个标签：出生日期 -->
                <td class="td_left"><label for="birthday">出生日期</label></td>
                <!-- 定义选择出生日期控件 -->
                <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
            </tr>

            <!-- 表格第八行有两个单元格：验证码 + （输入验证码区域 + 验证码图片） -->
            <tr>
                <!-- 定义一个标签：验证码 -->
                <td class="td_left"><label for="checkcode" >验证码</label></td>
                <!-- 定义输入验证码的框框 -->
                <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                    <!-- 验证码图片 -->
                    <img id="img_check" src="img/verify_code.jpg">
                </td>
            </tr>

            <!-- 表格第八行有一个单元格：注册按钮 -->
            <tr>
                <!-- 定义一个提交按钮 -->
                <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
            </tr>
        </table>
    </form>
</div>

第三部分：登录/有账号

<!-- 右边部分 -->
<div class="rg_right ">
    <p>已有账号？<a href="#">立即登录</a></p>
</div>

三个部分效果如下：

对这三个部分和页面背景，用CSS样式进行修饰：

/* 选择body标签，设置背景 */
body {
    background: url("./img/register_bg.png");
}
/* 为内容部分添加一个方框 */
.rg_layout {
    width: 900px;
    height: 500px;
    border: 8px solid #EEEEEE;
    background-color: white;
    /*让div水平居中*/
    margin: auto;
}
/* 将内容分为三个部分：左、中、右 */
.rg_left {
    float: left;
    margin: 15px;
}
.rg_center {
    float: left;
}
.rg_right {
    float: right;
    margin: 15px;
}
/* 对左边部分进行描述：字体大小，字体颜色 */
.rg_left > p:first-child {
    color:#FFD026;
    font-size: 20px;
}

.rg_left > p:last-child {
    color:#A6A6A6;
    font-size: 20px;
}
/* 对右边部分进行描述：字体大小，字体颜色 */
.rg_right > p:first-child {
    font-size: 15px;

}
.rg_right p a {
    color:pink;
}
/* 对中间部分进行描述*/
.td_left {
    width: 100px;
    /* 每行的高度为45个像素点 */
    height: 45px;
    /* 字体向右对齐 */
    text-align: right;
}
.td_right {
    /* 左边字体部分与右边内容部分之间，填充（隔开）50个像素点的位置 */
    padding-left: 50px ;
}
/* 对信息输入区域的边框进行描述 */
#username, #password, #email, #name, #tel, #birthday, #checkcode {
    width: 251px;
    height: 32px;
    border: 1px solid #A6A6A6;
    /* 设置边框圆角 */
    border-radius: 5px;
    padding-left: 10px;
}
/* 对验证码边框再次进行描述：减小边框的长度*/
#checkcode {
    width: 110px;
}
/* 对验证码图片进行描述 */
#img_check{
    height: 32px;
    /* 垂直方向对齐 */
    vertical-align: middle;
}
/* 对注册按钮进行描述 */
#btn_sub{
    width: 150px;
    height: 40px;
    background-color: #FFD026;
    border: 1px solid #FFD026 ;
}

描述之后，效果如下：

不过这个时候还没有验证功能，下面将实现这一功能。

表单验证功能的实现

这里拿用户名和密码进行验证：用户名和密码都是6-12位字符，不能有空格。

首先，先向表格中的用户名和密码区，插入块标签，用来显示判断的结果（用户名/密码格式是否正确）

<!-- 表格第一行有两个单元格：用户名 + 输入用户名信息区域 + 用户名是否符合 -->
<tr>
    <!-- 定义一个标签：用户名 -->
    <td class="td_left"><label for="username">用户名</label></td>
    <!-- 定义输入用户名信息的框框、用户名是否符合 -->
    <td class="td_right">
        <input type="text" name="username" id="username" placeholder="请输入用户名">
        <span id="s_username" class="error"></span>
    </td>
</tr>

<!-- 表格第二行有两个单元格：密码 + 输入密码区域 + 密码是否符合 -->
<tr>
    <!-- 定义一个标签：密码 -->
    <td class="td_left"><label for="password">密码</label></td>
    <!-- 定义输入密码的框框、密码是否符合 -->
    <td class="td_right">
        <input type="password" name="password" id="password" placeholder="请输入密码">
        <span id="s_password" class="error"></span>
    </td>
</tr>

如上，在table中添加的内容是：

<span id="s_username" class="error"></span>
和
<span id="s_password" class="error"></span>

具体功能的实现

校验用户名

// 校验用户名
function checkUsername(){
    // 1.获取用户名的值
    var username = document.getElementById("username").value;
    // 2.定义正则表达式
    var reg_username = /^\w{6,12}$/;
    // 3.判断值是否符合正则的规则
    var flag = reg_username.test(username);
    // 4.提示信息
    var s_username = document.getElementById("s_username");
    if(flag){
        // 提示绿色对勾
        s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
    }else{
        // 提示红色用户名有误
        s_username.innerHTML = "用户名格式有误";
    }
    return flag;
}

校验密码

// 校验密码
function checkPassword(){
    // 1.获取用户名的值
    var password = document.getElementById("password").value;
    // 2.定义正则表达式
    var reg_password = /^\w{6,12}$/;
    // 3.判断值是否符合正则的规则
    var flag = reg_password.test(password);
    // 4.提示信息
    var s_password = document.getElementById("s_password");
    if(flag){
        // 提示绿色对勾
        s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
    }else{
        // 提示红色用户名有误
        s_password.innerHTML = "密码格式有误";
    }
    return flag;
}

所有的实现代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body {
            background: url("./img/register_bg.png");
        }
        
        .rg_layout {
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
        }
        
        .rg_left {
            float: left;
            margin: 15px;
        }
        .rg_center {
            float: left;
        }
        .rg_right {
            float: right;
            margin: 15px;
        }
        
        .rg_left > p:first-child {
            color:#FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child {
            color:#A6A6A6;
            font-size: 20px;
        }
        
        .rg_right > p:first-child {
            font-size: 15px;

        }
        .rg_right p a {
            color:pink;
        }
        
        .td_left {
            width: 100px;
            height: 45px;
            text-align: right;
        }
        .td_right {
            padding-left: 50px ;
        }
        
        #username, #password, #email, #name, #tel, #birthday, #checkcode {
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        
        #checkcode {
            width: 110px;
        }
        
        #img_check {
            height: 32px;
            vertical-align: middle;
        }
        
        #btn_sub {
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }
        
        .error {
            color:red;
        }
        #td_sub {
            padding-left: 150px;
        }
    </style>
    <script>
        window.onload = function(){
            document.getElementById("form").onsubmit = function(){
                return checkUsername() && checkPassword();
            };
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
        };
        
        function checkUsername(){
            var username = document.getElementById("username").value;
            var reg_username = /^\w{6,12}$/;
            var flag = reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if(flag){
                s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
            }else{
                s_username.innerHTML = "用户名格式有误";
            }
            return flag;
        }
        
        function checkPassword(){
            var password = document.getElementById("password").value;
            var reg_password = /^\w{6,12}$/;
            var flag = reg_password.test(password);
            var s_password = document.getElementById("s_password");
            if(flag){
                s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
            }else{
                s_password.innerHTML = "密码格式有误";
            }
            return flag;
        }

    </script>
</head>
<body>

<div class="rg_layout">

    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>

    <div class="rg_center">
        <div class="rg_form">
            <form action="#" id="form" method="get">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" 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="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male" checked> 男
                            <input type="radio" name="gender" value="female"> 女
                        </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="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>
        </div>
    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>

</div>

</body>
</html>

​

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/520624.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Unity通过深度图做有交互效果的水泡沫

Unity通过深度图做有交互效果的水泡沫

通过深度图做交互水泡沫 大家好&#xff0c;我是阿赵。 这里做一个有交互效果的水面&#xff0c;物体浸入水面时&#xff0c;会根据物体的形状&#xff0c;有一圈水泡沫的效果&#xff0c;并且水泡沫的形状会跟随这物体变化。由于想做得稍微完整一点&#xff0c;又不想其他效果…
阅读更多...
ipad可以用别的品牌的手写笔吗？便宜的ipad电容笔

ipad可以用别的品牌的手写笔吗？便宜的ipad电容笔

而对于那些把ipad当做学习工具的人而言&#xff0c;苹果Pencil就成了必备品。但因为苹果Pencil太贵了&#xff0c;学生们买不起。因此&#xff0c;最好的选择还是平替电容笔。作为一个ipad的忠实用户&#xff0c;同时也是一个数字热爱着&#xff0c;这两年来&#xff0c;我一直…
阅读更多...
谈谈ChatGPT对中国教育的影响与挑战，我们该怎么办？

谈谈ChatGPT对中国教育的影响与挑战，我们该怎么办？

ChatGPT对中国教育的影响 1. 个性化教学 通过分析学生的学习习惯和问题&#xff0c;AI可以为每个学生提供个性化的学习路径。例如&#xff0c;如果一个学生在数学上表现出困难&#xff0c;AI可以提供更多的数学练习和教学资源。 2. 在线教育 AI可以作为在线课程的一部分提供帮助…
阅读更多...
verilog手撕代码5——计数器（置位、加减、环形、扭环形、格雷码计数器实现）

verilog手撕代码5——计数器（置位、加减、环形、扭环形、格雷码计数器实现）

文章目录 前言一、二进制计数器&#xff08;n位 2^n状态&#xff09;1.1 可置位计数器1.2 加减计数器 二、环形计数器&#xff08;n位 n状态&#xff09;2.1 移位寄存器首尾相连构成环形计数器 三、扭环形计数器/Johnson计数器&#xff08;n位 2*n状态&#xff09;3.1 移位寄存…
阅读更多...
路径规划算法：基于海鸥优化的路径规划算法- 附代码

路径规划算法：基于海鸥优化的路径规划算法- 附代码

路径规划算法&#xff1a;基于海鸥优化的路径规划算法- 附代码 文章目录 路径规划算法&#xff1a;基于海鸥优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要&#xff1a;本文主要介绍利用智能优化算法海鸥…
阅读更多...
带头双向循环链表原来这么简单？

带头双向循环链表原来这么简单？

☃️个人主页&#xff1a;fighting小泽 &#x1f338;作者简介&#xff1a;目前正在学习C语言和数据结构 &#x1f33c;博客专栏&#xff1a;数据结构 &#x1f3f5;️欢迎关注&#xff1a;评论&#x1f44a;&#x1f3fb;点赞&#x1f44d;&#x1f3fb;留言&#x1f4aa;&…
阅读更多...
win/mac电脑最好用的录屏软件Camtasia 2023官方中文版

win/mac电脑最好用的录屏软件Camtasia 2023官方中文版

Camtasia 2023专业的屏幕录制和视频剪辑软件 3000多万专业人士在全球范围内使用Camtasia展示产品&#xff0c;教授课程&#xff0c;培训他人&#xff0c;以更快的速度和更吸引人的方式进行沟通和屏幕分享。使您在Windows和Mac上进行录屏和剪辑创作专业外观的视频变得更为简单。…
阅读更多...
Kali-linux使用Maltego收集信息

Kali-linux使用Maltego收集信息

Maltego是一个开源的漏洞评估工具&#xff0c;它主要用于论证一个网络内单点故障的复杂性和严重性。该工具能够聚集来自内部和外部资源的信息&#xff0c;并且提供一个清晰的漏洞分析界面。本节将使用Kali Linux操作系统中的Maltego&#xff0c;演示该工具如何帮助用户收集信息…
阅读更多...
【LeetCode】312. 戳气球

【LeetCode】312. 戳气球

312. 戳气球&#xff08;困难&#xff09; 解法一&#xff1a;动态规划 首先看一个区间&#xff1a; 区间(i,j) 是一个开区间&#xff0c;因为我们只能戳爆 i 和 j 之间的气球&#xff0c;不能戳爆索引为 i 和 j 的气球。 我们不妨考虑该区间内被戳爆的最后一个气球&#xff…
阅读更多...
UNIAPP框架中获取当前定位信息

UNIAPP框架中获取当前定位信息

概述 准备生成自己的Android证书。高德地图生成自己的key并配置mainfest.json。设置左上角图标并完成配置。页面中获取经纬度坐标。依据经纬度坐标获取位置信息。更新图标信息完成展示。 第一步&#xff1a;生成Android证书 参考资料 Android平台云端打包证书使用说明 https…
阅读更多...
java类和对象之认识1

java类和对象之认识1

文章目录 一、Java类二、Java成员变量三、Java方法四、Java类的构造方法五、Java创建对象六、Java使用对象七、Java对象的引用和实体八、Java类与程序的基本结构九、Java参数传值总结 一、Java类 类是组成Java程序的基本要素&#xff0c;一个Java应用程序就是由若干个类所构成…
阅读更多...
永磁同步电机（PMSM）无传感器控制基于龙伯格观测器Matlab/Simulink仿真分析

永磁同步电机（PMSM）无传感器控制基于龙伯格观测器Matlab/Simulink仿真分析

文章目录 前言一、龙伯格观测器1.1.龙伯格观测器的原理2.2.龙伯格观测器的误差2.3.PMSM龙伯格观测器的建立 二、Matlab/Simulink仿真分析2.1.仿真电路分析2.1.1.电机控制模式切换10ms任务2.1.2.速度环控制2ms任务2.1.3. 电流环控制50us任务2.1.4.电机主电路 2.2.仿真结果分析 总…
阅读更多...
单调栈模板总结及应用

单调栈模板总结及应用

文章和代码已经归档至【Github仓库&#xff1a;https://github.com/timerring/algorithms-notes 】或者公众号【AIShareLab】回复 算法笔记 也可获取。 文章目录 单调栈模板栈算法模板例题&#xff1a;单调栈基本思路code 单调栈模板 栈&#xff1a;先进后出。 队列&#xff…
阅读更多...
shell数组（包含排序算法）

shell数组（包含排序算法）

目录 一&#xff1a;数组定义方法 1、方法一 2、方法二 ​3、方法三 ​4、方法四 5、判断数组是否完整 &#xff08;1&#xff09;方法一 &#xff08;2&#xff09;方法二&#xff1a;通过脚本 二&#xff1a;获取数组值 1、获取数组长度 2、获取数组数据列表 3、获…
阅读更多...
ipad专用笔和其他笔有什么区别？第三方电容笔了解

ipad专用笔和其他笔有什么区别？第三方电容笔了解

要是ipad仅仅用来玩游戏&#xff0c;看电视的话&#xff0c;也太浪费ipad平板的作用了。ipad这个产品&#xff0c;用途还是很广的&#xff0c;既能用于职业绘画&#xff0c;又能用于学习笔记。许多人都觉得苹果的电容笔非常好&#xff0c;但与普通的电容笔相比&#xff0c;它的…
阅读更多...
Python常用的开发工具合集

Python常用的开发工具合集

​ Python是一种功能强大且易于学习的编程语言&#xff0c;被广泛应用于数据科学、机器学习、Web开发等领域。随着Python在各个领域的应用越来越广泛&#xff0c;越来越多的Python开发工具也涌现出来。但是&#xff0c;对于新手来说&#xff0c;选择一款合适的Python开发工具可…
阅读更多...
美本统计学基础笔记

美本统计学基础笔记

美本统计学基础笔记 1.基础2.概率3.离散概率分布Discrete Probability Distributions4.The Normal Probability Distribution正态概率分布5.Sampling Distributions采样分布6.Large-Sample Estimation大样本估计7.Large-Sample Tests of Hypotheses假设的大样本检验 1.基础 左…
阅读更多...
颜值打分代码实例讲解(paddle框架)

颜值打分代码实例讲解(paddle框架)

数据集介绍 训练数据集为华南理工大学实验室公布的数据集 数据中包含500张女生图片&#xff0c;分别由70人进行打分&#xff0c;最终取平均值即为该图片的打分情况。 我们在实践中将图片分值设定为1-5。 500张图片中&#xff0c;450张用于训练&#xff0c;50张用于验证。 任…
阅读更多...
快速落地基于“AIGC+数字人”的数字化内容生产

快速落地基于“AIGC+数字人”的数字化内容生产

谁不想有一个可爱的数字人形象呢&#xff1f;在日常的工作和娱乐中&#xff0c;越来越多的数字人虚拟形象与大家见面&#xff0c;他们可以是主播&#xff0c;也可以是语音助手&#xff0c;还可以是你自己的虚拟宠物。只有更快更精准的生成数字人&#xff0c;才能让数字人更加普…
阅读更多...
【JS】1680- 重学 JavaScript API - Beacon API

【JS】1680- 重学 JavaScript API - Beacon API

❝ 前期回顾&#xff1a;1.Page Visibility API 2.Broadcast Channel API ❞ 1. 什么是 Beacon API 1.1 概念介绍 Beacon API 是 HTML5 提供的一种新的浏览器 API&#xff0c;可以用于在浏览器后台异步地发送数据&#xff0c;而不影响当前页面的加载和性能。通过 Beacon API&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023