注册表单提交

最新推荐文章于 2024-06-11 11:33:55 发布
最新推荐文章于 2024-06-11 11:33:55 发布
阅读量219 收藏
点赞数
分类专栏： 前端（html+css+js） 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua_Piter/article/details/128722595
版权

一、注册表单提交要求

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮
2.点击表单里的输入框，隐藏提示文字
3.点击提交和重置按钮时，都需要有相应的提示
4.在表单提交是，需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同

二、实验原理

利用鼠标的点击事件，使其里面placeholder消失，再利用提交时判断其是否符合要求

三、视频效果

表单

四、代码

<!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>Document</title>
    <style>
        .box {
            width: 600px;
            height: 550px;
            background-color: aqua;
            margin: 0 auto;
        }

        td {
            font-size: 25px;
        }

        td>input {
            height: 38px;
            width: 310px;
            font-size: 25px;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <form action="#" id="formlist">
            <table cellpadding="10" cellspacing="0">
                <tr>
                    <th colspan="3" style="font-size: 25px;">注册表单提交</th>
                </tr>
                <tr>
                    <td class="checked">昵称：</td>

                    <td>
                        <input type="text" name="username" id="username" placeholder="请输入用户名，不超过10个字">
                    </td>
                </tr>
                <tr>
                    <td class="checked">姓名：</td>

                    <td>
                        <input type="text" name="name" id="name" placeholder="请输入名字，不超过4个字">
                    </td>
                </tr>
                <tr>
                    <td class="checked">QQ：</td>

                    <td>
                        <input type="text" name="QQ" id="QQ" placeholder="请输入QQ [5,10)">
                    </td>
                </tr>
                <tr>
                    <td class="checked">手机号：</td>

                    <td>
                        <input type="text" name="phone" id="phone" placeholder="请输入手机号11位">
                    </td>
                </tr>
                <tr>
                    <td class="checked">邮箱：</td>

                    <td>
                        <input type="text" name="email" id="email" placeholder="请输入邮箱 ">
                    </td>
                </tr>
                <tr>
                    <td class="checked">密码：</td>

                    <td>
                        <input type="password" name="password" id="password" placeholder="请输入密码 (8,16)">
                    </td>
                </tr>
                <tr>
                    <td class="checked">确认密码：</td>

                    <td><input type="password" name="vactor" id="vactor" placeholder="请再次输入密码,必须相等"></td>
                </tr>
                <tr align="center">
                    <td colspan="3">
                        <input id="btn1" type="submit"
                            style="height: 35px; width: 120px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input id="btn2" type="reset" style="height: 35px;width: 120px;">
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        var username = document.getElementById("username")
        var name = document.getElementById("name")
        var QQ = document.getElementById("QQ")
        var phone = document.getElementById("phone")
        var email = document.getElementById("email")
        var password = document.getElementById("password")
        var vactor = document.getElementById("vactor")
        var usernames = username.value
        var names = name.value
        var QQs = QQ.value
        var phones = phone.value
        var emails = email.value
        var passwords = password.value
        var vactors = vactor.value

        window.onload = function () {

            username.onfocus = function () {
                username.placeholder = ''
            }
            name.onfocus = function () {
                name.placeholder = ''
            }
            QQ.onfocus = function () {
                QQ.placeholder = ''
            }
            phone.onfocus = function () {
                phone.placeholder = ''
            }
            email.onfocus = function () {
                email.placeholder = ''
            }
            password.onfocus = function () {
                password.placeholder = ''
            }
            vactor.onfocus = function () {
                vactor.placeholder = ''
            }

            btn1.onclick = function () {

                if (usernames.length > 10) {
                    alert("格式不对请重新填写")
                }
                if (names.length > 4) {
                    alert("格式不对请重新填写")
                }
                if (QQs.length < 5 || QQs.length >= 10) {
                    alert("格式不对请重新填写")
                }

                if (phones.length != 11) {
                    alert("格式不对请重新填写")
                }
                if (passwords.length < 8 || passwords.length > 16) {
                    alert("格式不对请重新填写")
                }
                if (passwords.length != vactors.length) {
                    alert("格式不对请重新填写")
                }
            }
            }
    </script>
</body>

</html>
黄大帅@lz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单注册
Yang彡的博客
11-15 536
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;script type=&
注册表单
weixin_34387468的博客
09-18 75
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户注册页面</title><script type="text/javascript"> //验证表单 function run() { //用户名不能为空 //...
HTML 注册表单
最新发布
南北极之间
06-11 1112
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
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（层叠样式表）文件...
用户注册表单
06-23
简单的网页制作表单，适合后台用户注册的表单，简单的网页制作表单，适合后台用户注册的表单，
用户注册页面表单设计
06-16
用户注册的表单网页，有两次密码输入是否正确的判断，提交窗口的弹出，同页面的重制和提交，多个选项的设置，下拉菜单的设置
简单的注册表单
Zyrzka的博客
07-17 315
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;title&gt;注册界面&lt;/title&gt;     &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body bgcolor="#caffff"&gt; &lt;h1
完整的注册表单
qq_43733682的博客
02-25 194
男 女 编程 其他 请选择职业 公司职员 自由职业者 学生 其他 注册
表单注册表单注册表单注册
m0_66106768的博客
05-25 232
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>注册表</title> </head> <body style="border: 5px solid #ffffff; width: 560px; margin: 0 auto;margin-top: 30px;background: #cccccc;"&g...
简易注册表单（HTML）
每天一个前端小知识~
08-13 9969
HTML：用于搭建基础网页，展示页面的内容 下面利用HTML的知识实现注册表单 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <form action="#" method="get"> <h3 al
【前端开发实战】用 CSS 制作一个华丽的动画登录表单超详细教程新手友好~完整代码示例| 前端动效| 网页设计| 项目实例|HTML/CSS动画|打造炫酷漂亮的登陆表单 - 适合初学者小白的详细指南
南北极之间
06-07 240
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。在用户悬停在环形动画上时，边框颜色会变化并增加阴影，提升交互体验。整体效果是一个炫酷的动画登录表单。这个登录表单页面包含了一个环形动画效果和一些输入框、按钮的样式。
ajax注册表单提交到数据库
06-10
好的，首先你需要编写一个 HTML 表单，包含用户输入的信息，例如用户名、密码、邮箱等等。然后你需要使用 JavaScript 和 AJAX 技术将表单数据提交到后台服务器。在后台服务器上，你需要编写一个后端脚本，将表单数据解析并插入到数据库中。 以下是一个基本的示例： HTML 表单： ``` <form id="register-form"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <input type="email" name="email" placeholder="邮箱"> <button type="submit">注册</button> </form> ``` JavaScript 代码： ``` // 获取表单元素 const registerForm = document.getElementById('register-form'); // 监听表单提交事件 registerForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 const formData = new FormData(registerForm); // 发送 AJAX 请求 const xhr = new XMLHttpRequest(); xhr.open('POST', '/register.php'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 处理服务器响应 console.log(xhr.responseText); } }; xhr.send(new URLSearchParams(formData).toString()); }); ``` 后端 PHP 脚本： ``` <?php // 连接到数据库 $mysqli = new mysqli('localhost', 'username', 'password', 'database'); if ($mysqli->connect_errno) { echo '连接数据库失败：' . $mysqli->connect_error; exit(); } // 获取表单数据 $username = $_POST['username']; $password = $_POST['password']; $email = $_POST['email']; // 插入数据到数据库 $stmt = $mysqli->prepare('INSERT INTO users (username, password, email) VALUES (?, ?, ?)'); $stmt->bind_param('sss', $username, $password, $email); $stmt->execute(); echo '注册成功！'; ``` 请注意，这只是一个基本的示例，实际上你需要做更多的安全检查和验证，以确保用户输入的数据是合法和安全的。此外，你还需要根据自己的需求进行调整和改进。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值