注册表单提交

最新推荐文章于 2025-10-09 09:41:26 发布
最新推荐文章于 2025-10-09 09:41:26 发布
阅读量647 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css3 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sodapease/article/details/128690644
博客围绕表单需求展开，表单包含昵称、姓名等信息及提交、重置按钮。点击输入框隐藏提示文字，点击按钮有提示。提交表单时会验证内容合理性，如昵称、姓名长度限制，QQ、手机号格式要求，密码规则等，还介绍了实现原理、代码及展示效果。

注册表单提交

需求

  1. 表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮;

  2. 点击表单里的输入框，隐藏提示文字;

  3. 点击提交和重置按钮时，都需要有相应的提示;

  4. 在表单提交时，需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。

实现原理

需求实现原理
点击表单里的输入框，隐藏提示文字
利用css改变
webkit浏览器：::-webkit-input-placeholder
火狐的选择器::-moz-placeholder
点击提交和重置按钮时，都需要有相应的提示
在oninput中实时判断是否输入正确的格式，若没有则弹出警告并返回重新输入
验证验证填写内容是否合理
使用正则表达式判断是否输如合理，若不合理则弹窗提醒且无法正常提交
密码和确认密码需相同
判断密码和确认密码的值是否相同，若相同则可提交显示为提交成功，反之需重新输入

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 600px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #b0b0b0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        h3{
            writing-mode: vertical-lr;
            margin: 15px;
            color: #364c73;
        }
        .message>div{
            padding: 8px;
        }
        .input>input{
            width: auto;
            height: 20px;
            border: 1px solid #e0e0e0;
            padding-left: 5px;
            outline: none;
        }
        .input>div{
            padding: 7px;
        }
        input:focus::-webkit-input-placeholder{
            color: transparent;
        }
        .btn{
            display: flex;
            flex-direction: column;
        }
        .btn :nth-child(1){
            margin: 15px;
            width: 60px;
            height: 25px;
            background-color: #364c73;
            border: transparent;
            border-radius: 20px;
            color: #fff;
        }
        .btn :nth-child(2){
            margin: 15px;
            width: 60px;
            height: 25px;
            background-color: #fff;
            border: 1px solid #364c73;
            border-radius: 20px;
            color: #364c73;
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <div class="container">
            <h3>注册表单</h3>
            <div class="message">
                <div class="nikname">昵称：</div>
                <div class="name">姓名：</div>
                <div class="qq">QQ：</div>
                <div class="phonenum">手机号：</div>
                <div class="email">邮箱：</div>
                <div class="password">密码：</div>
                <div class="sure">确认密码：</div>
                <div id="error"></div>
            </div>
            <div class="input">
                <div class="input">
                    <input type="text" id="nikname" placeholder="昵称不超过10个字" maxlength="10" oninput="checknikname()">
                </div>
                <div class="input">
                    <input type="text" id="name" placeholder="姓名不超过4个字" maxlength="4" oninput="checkname()">
                </div>
                <div class="input">
                    <input type="text" id="qq" placeholder="QQ在6到10位" oninput="checkqq()">
                </div>
                <div class="input">
                    <input type="text" id="number" placeholder="请输入11位手机号" oninput="checknumber()">
                </div>
                <div class="input">
                    <input type="email" id="email" placeholder="请输入邮箱" oninput="checkemail()">
                </div>
                <div class="input">
                    <input type="password" id="password" placeholder="由字母和数字组成且(8,16)" oninput="checkpassword()">
                </div>
                <div class="input">
                    <input type="password" id="sure" placeholder="请再次确认密码" oninput="checksure()">
                </div>
            </div>
            <div class="btn">
                <input type="submit" value="提交" id="sub">
                <input type="reset" value="重置" id="res">
            </div>
        </div>
    </form>
    <script src="./jquery-3.6.3.js"></script>
    <script>
        function checknikname(){
            let nikname = $('#nikname').val()
        if(nikname == '' || nikname > 10){
            return
        }
        return
        }
        function checkname(){
            let name = $('#name').val()
        if(name == '' || name >4){
            return
        }
        if(!name.match('^[\u4e00-\u9fa5_a-zA-Z]+$')){
            alert("请输入正确的姓名！")
            $('#name').val('')
        }
        return
        }
       function checkqq(){
        let qq = $('#qq').val()
        if(qq == '' || qq > 10 || qq < 6){
            return
        }
        if(!qq.match('^[0-9]+$')){
            alert("请输入正确的QQ！")
            $('#qq').val('')
        }
        return
       }
        function checknumber(){
            let number = $('#number').val()
        if(number == '' || number!=11){
            return
        }
        if(!number.match('^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$')){
            alert("请输入正确的手机号！")
            $('#number').val('')
        }
        return
        }
        function checkemail(){
            let email = $('#email').val()
        if(email == '' || email!=11){
            return
        }
        if(!email.match('^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$')){
            alert("请输入正确的邮箱！")
            $('#email').val('')
        }
        return
        }
        function checkpassword(){
            let password = $('#password').val()
        if(password == ''){
            return
        }
        return
        }
        function sure(){
            let password = $('#password').val()
            let sure = $('#sure').val()
        if(sure != password){
            alert('密码不一致！')
        }
        return
        }
        $('#sub').click(function(){
            alert('提交成功！😉')
        })
    </script>
</body>
</html>

效果展示

在这里插入图片描述

Sodapease
关注
php form表单提交代码,PHP之表单的提交
weixin_39736934的博客
03-09 1856
一、前台数据的提交前台数据的提交一般在form表单中完成，主要有两种方式，一种为post，一种为get。1、get方式：前台代码：后台代码：echo "提交成功";提交结果：说明：(1)、是一种明文提交方式，提交的数据会在url中显示出来，不太安全，传输的数据量较小，受到地址栏长度的限制(2)、提交的数据类型单一，只能传递文本数据(3)、主要用于从服务器端获取数据2、post方式：前台代码：后台代...
用ajax提交表单给数据库,如何利用ajax提交form表单到数据库
weixin_26831583的博客
08-06 3549
如何利用ajax提交form表单到数据库发布时间：2021-06-17 14:52:49来源：亿速云阅读：75作者：小新这篇文章主要介绍如何利用ajax提交form表单到数据库，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！大家应该都知道，在静态页面提交表单到数据库很简单就是单纯的这个缺点是会刷新页面，会跳转页面的。今天给大家带来的技术就是ajax提交表单优点是不刷新页面，不...
Java网站项目(一)----注册页面表单校验
qq_37649504的博客
04-05 412
1、校验用户名的方法 //校验用户名 function checkUsername() { alert("校验用户名"); return true; //1.获取用户名 var username = $("#username").val(); //2.定义正则 字母开头，允许5-16字节，允许字母数字下划线 var reg_username = /^[a-zA-Z][a-zA-Z0-9_...
表单提交前，判断必填项是否填写，处理提交数据通用写法
qq_45327886的博客
02-28 1992
提交表单数据前处理数据通用写法
JavaScript表单验证
m0_72168336的博客
06-03 726
JavaScript表单验证
文盲的 JavaScript 实战篇之一：表单验证
文盲的专栏
12-01 1037
在我们的日常工作中，经常为各种页面撰写不同的表单，并且，需要对表单提交时，表单所输入的内容进行验证，比如，登录时，用户名不能为空、注册时，密码长度和复杂程度要符合安全标准等。form name="theForm" method="post" action="actionUrl">    li>用 户 名：input type="text" name="uid" />li>    li>登录密码：i
form表单做验证（一）
baidu_32542573的博客
04-24 1216
forms.py              (1)               from django import forms               class SumForm(forms.Form):                a = forms.IntegerField(label="num_a")                b = forms.EmailField(label...
html点击弹出登录注册表单提交代码
m0_57941469的博客
03-06 1533
介绍： html手机登录表单，手机注册表单，弹出表单，点击弹出弹窗。 网盘下载地址：点击登录弹窗代码.zip - 蓝奏云
JavaScript表单提交
热门推荐
weixin_44540247的博客
04-28 1万+
表单提交在前端编程阶段中也是一个重点。它是由页面数据保存到后台数据库的重要枢纽，通过表单提交的方式将数据上传到数据库进行保存。同时这些数据也包含用户信息、统计信息、日志信息等等。 数据的信息不同，上传的方式也不同。在JavaScript中有四种种表单提交的方式： 一、 Form表单手动提交（get与post） 在没有任何Js代码的影响下，Form表单本身是自带提交功能的。在form元素标签上有两个...
[JSP暑假实训] 二.JSP网站创建及Servlet实现注册表单提交、计算器运算
杨秀璋的专栏
07-01 9686
本系列文章是作者暑假给学生进行实训分享的笔记，主要介绍MyEclipse环境下JSP网站开发，包括JAVA基础、网页布局、数据库基础、Servlet、前端后台数据库交互、DAO等知识。 本篇文章开始讲解MyEclipse环境下创建JSP网站，并实现注册表页面的创建及Servlet获取提交的数据，基础性文章。非常基础的文章，希望对读者有所帮助 ，尤其是我的学生。
jQuery完整注册表单提交验证
10-13
在本文中，我们将深入探讨如何使用jQuery实现一个完整的用户注册表单提交验证。这个验证系统包括了多个关键的验证环节，如用户名、密码强度、显示/隐藏密码、手机号码输入控制以及手机验证码、真实姓名和身份证号的...
html5点击弹出手机登录注册表单提交代码
11-11
总结来说，“html5点击弹出手机登录注册表单提交代码”涉及到HTML5的表单元素、CSS的显示控制、JavaScript事件处理、表单验证、离线存储以及AJAX提交等多个知识点。理解和掌握这些技术，将有助于构建高效、用户友好...
jquery css3带背景透明登录注册表单提交代码
10-30
本项目“jquery css3带背景透明登录注册表单提交代码”显然涉及到这两个技术的结合，旨在实现一个美观且功能完善的登录注册表单。 首先，让我们深入了解jQuery。jQuery是一个轻量级、高性能的JavaScript库，它简化...
jQuery完整注册表单提交验证.zip
07-11
《jQuery完整注册表单提交验证：构建高效用户体验》 在Web开发中，用户注册表单是网站与用户交互的关键环节，而表单的验证则直接关系到用户体验和数据的准确性。"jQuery完整注册表单提交验证"是一个针对此需求的...
带流程的注册表单提交验证html模板
12-04
1. **index.html**：这是网页的主入口文件，包含HTML代码，定义了页面结构和内容，包括注册表单的各个步骤、表单元素（文本框、复选框、单选按钮等）以及提交按钮。 2. **Css** 文件夹：包含CSS（层叠样式表）文件...
浏览器事件循环与内存管理可视化
西洼工作室的博客
10-08 543
本文介绍了一个浏览器事件循环、内存管理与渲染的模拟界面设计和实现。页面采用响应式布局，使用CSS Grid和Flexbox构建双面板结构，包含代码编辑器和内存/队列可视化区域。界面采用渐变背景、毛玻璃效果面板和卡片式设计，通过动画效果增强交互体验。功能上实现了代码编辑、执行控制、内存堆栈可视化等功能模块，使用不同颜色区分活跃状态，并支持执行速度调节。整体设计融合了实用性和视觉美感，为理解浏览器底层机制提供了直观的可视化工具。
Java 将 HTML 转换为 Word：告别手动复制粘贴
最新发布
2503_93068783的博客
10-09 1077
在日常的软件开发和企业应用中，我们经常会遇到这样的场景：需要将动态生成的 HTML 内容、网页报告或用户提交的富文本信息转化为规范的 Word 文档。无论是为了存档、打印、编辑还是进行离线查阅，一个格式良好且可编辑的 Word 文文档都比纯粹的 HTML 更加实用。然而，手动将 HTML 复制粘贴到 Word 中不仅效率低下，还常常导致格式错乱，令人头疼不已。
HTML语义化：当网页会说话
m0_72990228的博客
10-09 1176
HTML语义化是通过合理使用标签让网页具备可读性与结构性。
前端知识详解——HTML/CSS/Javascript/ES5+/Typescript篇/算法篇
警警的博客
10-06 290
RestFul WebAPI协议 Servlet&JSP原型链IJava十大经典算法—KMP Java十大经典算法——贪心算法 Java十大常见算法——动态规划算法计算机原理一 计算机原理二Mock.js详解
注册表单提交流程及验证HTML模板
资源摘要信息: "带流程的注册表单提交验证html模板" 知识点概述： 该资源名为"带流程的注册表单提交验证html模板.zip"，是一款包含注册、填写流程及提交验证功能的前端模板。这个模板提供了一个用户友好的界面，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值