html 在表单中数据输入完后，点击“发送”按钮，跳转到“ok.html”页面，在该页面中显示“恭喜，注册成功！”。

可以使用以下代码实现： ```html  <form action="/ok.html">  <button type="submit">发送</button> </form>  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册成功</title> </head> <body> <h1>恭喜，注册成功！</h1>  </body> </html> ``` 在表单中，我们设置了 `action` 属性为 "/ok.html"，表示在用户点击“发送”按钮后，将提交表单数据到 "/ok.html" 页面。然后，在 "/ok.html" 页面中，我们可以添加需要展示的内容，比如“恭喜，注册成功！”等。需要注意的是，以上代码只是简单示例，实际情况下，我们需要对表单数据进行验证和处理，然后再显示注册成功的信息。通常，我们会使用后端语言（如 PHP、Python、Java 等）来处理表单数据。

如何做一个注册页面，并在点击提交后跳转到登录页面

要制作一个注册页面并在点击提交后跳转到登录页面，你需要使用 HTML、CSS 和 JavaScript 来创建界面和处理逻辑。下面是一个简单的实现过程： 1. 创建注册页面首先，你需要创建一个 HTML 文件，用来展示注册页面。可以使用表单元素来收集用户的注册信息。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <h1>注册新用户</h1> <form> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <button id="submit-btn" type="submit">注册</button> </form> </body> </html> ``` 在这个例子中，我们创建了一个包含用户名、密码和注册按钮的表单，用来收集用户的注册信息。 2. 处理注册逻辑在用户填写完注册表单并点击注册按钮后，需要将表单数据提交到服务器进行处理。你可以使用 JavaScript 代码来监听表单的 submit 事件，并在事件处理函数中发送 HTTP 请求，将表单数据发送到服务器。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <h1>注册新用户</h1> <form> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <button id="submit-btn" type="submit">注册</button> </form> <script> document.querySelector('form').addEventListener('submit', function(event) { // 阻止表单默认提交行为 event.preventDefault(); // 获取表单数据 let username = document.getElementById('username').value; let password = document.getElementById('password').value; // 发送 HTTP 请求，将表单数据提交到服务器 fetch('/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: username, password: password }) }).then(function(response) { // 处理响应结果 if (response.ok) { // 注册成功，跳转到登录页面 window.location.href = '/login.html'; } else { // 注册失败，显示错误提示 alert('注册失败，请重试！'); } }).catch(function(error) { // 处理异常情况 console.error(error); alert('注册失败，发生异常，请联系管理员！'); }); }); </script> </body> </html> ``` 在这个例子中，我们使用 JavaScript 代码监听了表单的 submit 事件，并在事件处理函数中获取了表单数据。然后，我们使用 fetch 函数发送了一个 POST 请求，将表单数据以 JSON 格式提交到服务器。如果服务器返回的响应状态码为 200，说明注册成功，此时我们可以使用 `window.location.href` 属性将浏览器的 URL 地址设置为登录页面的地址，从而跳转到登录页面。需要注意的是，这里的服务器端接口需要根据实际情况来编写，这里只是一个示例。 3. 创建登录页面最后，你需要创建一个登录页面，用来让用户登录系统。登录页面也可以使用表单元素来收集用户的登录信息。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> </head> <body> <h1>用户登录</h1> <form> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <button id="submit-btn" type="submit">登录</button> </form> </body> </html> ``` 将上述代码保存为 `login.html` 文件，上传到服务器，注册页面中的 JavaScript 代码就可以使用 `window.location.href` 属性来跳转到登录页面了。

html 提交的表单的输入的信息进行正则表达式的验证，如下：（1）用户名长度为6-12位，只能由字母、数字、下划线组成。（2）密码必须包含数字和大小写字母，长度为6-12位。（正则表达式自己去网上搜索）（3）确认密码要和原密码一致。（4）移动电话必须符合实际。（5）其它必填项不能为空。（6）数据输入完后，点击“发送”按钮，跳转到“ok.html”页面，在该页面中显示“恭喜，注册成功！”。

可以使用 HTML5 提供的 `pattern` 属性和正则表达式来限制表单的格式，同时使用 JavaScript 来验证表单数据是否正确。示例代码如下： ```html  <form> <label>用户名：<br> <input type="text" name="username" pattern="[a-zA-Z0-9_]{6,12}" required> </label> <br> <label>密码（包含数字和大小写字母，长度为 6-12 位）：<br> <input type="password" name="password" pattern="^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{6,12}$" required> </label> <br> <label>确认密码：<br> <input type="password" name="confirmPassword" required> </label> <br> <label>移动电话（格式为 11 位数字）：<br> <input type="tel" name="phone" pattern="^\d{11}$" required> </label> <br> <label>其他必填项：<br> <textarea name="other" required></textarea> </label> <br> <button type="submit">发送</button> </form>  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册成功</title> </head> <body> <h1>恭喜，注册成功！</h1>  <script> // 获取表单数据 const form = document.querySelector('form'); const username = form.elements.username.value; const password = form.elements.password.value; const confirmPassword = form.elements.confirmPassword.value; const phone = form.elements.phone.value; const other = form.elements.other.value; // 验证数据是否正确 const usernameRegex = /^[a-zA-Z0-9_]{6,12}$/; const passwordRegex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{6,12}$/; const phoneRegex = /^\d{11}$/; if (!usernameRegex.test(username)) { alert('用户名格式不正确！'); } else if (!passwordRegex.test(password)) { alert('密码格式不正确！'); } else if (password !== confirmPassword) { alert('两次密码不一致！'); } else if (!phoneRegex.test(phone)) { alert('手机号格式不正确！'); } else if (other.trim() === '') { alert('其他必填项不能为空！'); } else { alert('恭喜，注册成功！'); window.location.href = '/ok.html'; } </script> </body> </html> ``` 在上述代码中，我们为每个输入框添加了 `pattern` 属性，用于限制输入的格式。然后，在用户点击“发送”按钮后，我们使用 JavaScript 获取表单数据，并分别使用正则表达式验证数据是否正确。如果数据不正确，弹出相应的提示信息；否则，跳转到 "/ok.html" 页面，并显示注册成功的信息。需要注意的是，以上代码只是简单示例，实际情况下，我们需要对表单数据进行更严格的验证和处理。同时，前端验证只是起到提示作用，后端也需要再次验证，以防止恶意提交数据。

html 在表单中数据输入完后，点击“发送”按钮，跳转到“ok.html”页面，在该页面中显示“恭喜，注册成功！”。

如何做一个注册页面，并在点击提交后跳转到登录页面

相关推荐

这是一个html注册页面

html注册表单

成功了.html

miniui页面跳转的具体例子

登录按钮跳转的具体代码

点击提交之后如何提示提交成功弹窗并跳转主页

javaScript登录注册页面

layui 弹框里面的按钮

如何用post请求得到url服务器内用户名和密码等数据和用户输入的用户名和密码比对的前端代码怎么写

写代码实现网页表单登录

springboot+mybatisplus+vue实现登录跳转

用myeclipse连接数据库实现登陆注册

spring boot vue实现登录功能

springmvc上传下载实例

最新推荐

js确认框confirm&#40;&#41;用法实例详解

2进制3位数过去现在将来输赢公式代码.txt

福州大学在广东2021-2024各专业最低录取分数及位次表.pdf

WordPress 集网址、资源、资讯于一体的导航类主题开心版

【Java学习】activemq消息中间件学习demo.zip

构建Cadence PSpice仿真模型库教程

管理建模和仿真的文件

实时分析可视化：工具、技术与应用揭秘

编写python程序，要求模拟扔骰子游戏。要求扔n次，统计各点数的次数与概率。

VMware 10.0安装指南：步骤详解与网络、文件共享解决方案

js确认框confirm()用法实例详解