表单提交失败时的错误回显(提示用户并回显用户名等)

本文介绍了在表单提交失败时如何向用户显示错误信息并回显已输入的用户名和电子邮件。在注册页面的Servlet中,错误信息存储在Request域中,然后在login.jsp页面通过span标签显示。当用户未输入或提交后,通过request.getAttribute("msg")获取并展示错误信息。
摘要由CSDN通过智能技术生成

在这里插入图片描述
如上,提交表单时,会提示用户错误信息,并将他刚刚输入的用户名和电子邮件回传,这样用户只用重新输入密码这些就可!

怎么做呢?

  1. 这个是注册页面,所以在他对应的loginServlet里面,把回显的信息保存在Requset域中。
//把回显信息,保存在Request域中
					request.setAttribute("msg", "用户名已经存在!");
					request.setAttribute("username", username);
					request.setAttribute("email", email);
	//把回显信息,保存在Request域中
				request.setAttribute("msg", "验证码错误!");
				request.setAttribute("username", username);
				request.setAttribute("email", email);

完整是这样的:👇👇(不能只看片段)

protected void doPost(HttpServletRequest request, HttpServletResponse respon
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,下面是一个简单的示例,使用 JavaScript 编写一个表单收集数据并提交,然后回显数据: HTML 代码: ```html <form id="myForm"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required><br> <label for="message">留言:</label> <textarea id="message" name="message" rows="5" cols="40"></textarea><br> <button type="submit" id="submitBtn">提交</button> </form> <div id="result"></div> ``` JavaScript 代码: ```javascript const form = document.querySelector('#myForm'); const result = document.querySelector('#result'); form.addEventListener('submit', (event) => { event.preventDefault(); // 阻止表单默认提交行为 const formData = new FormData(event.target); // 获取表单数据 // 向服务器发送数据,这里使用了 axios 库 axios.post('/submit', formData) .then(response => { // 清空表单 event.target.reset(); // 显示提交结果 result.textContent = '提交成功!'; // 回显数据 const data = response.data; result.innerHTML = `<p>姓名:${data.name}</p><p>邮箱:${data.email}</p><p>留言:${data.message}</p>`; }) .catch(error => { console.error(error); result.textContent = '提交失败!'; }); }); ``` 这个示例中,当用户点击提交按钮,会触发表单的提交事件。我们使用 `FormData` 对象获取了表单中的数据,然后使用 axios 库向服务器发送了一个 POST 请求。在请求成功后,我们清空了表单,显示了提交结果,并回显了服务器返回的数据。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值