注册功能通过Ajax请求验证用户名是否可用
程序员文章站
2022-03-07 21:36:49
1.创建一个动态Web项目，版本2.5，下面是目录：2.前端页面：reg.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here&l.....</div>
<div class="content">
<p>1.创建一个动态Web项目，版本2.5，下面是目录：</p>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="注册功能通过Ajax请求验证用户名是否可用" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA4MTAvYl8wXzIwMjAwODEwMTY0ODU0NzU1My5wbmc=" title="注册功能通过Ajax请求验证用户名是否可用"></p>
<p>2.前端页面： reg.jsp<br>
</p>
<pre>
<code><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<base href="http://localhost:8080/Web_Ex/">
<style type="text/css">
body{
background-color: white
}
</style>
<!-- 引入jquery的js文库 -->
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//给提交按钮绑定单击事件
$("#sub").click(function(){
//获取输入的用户名
var username=$("#username").val();
//设置一个用户名是否符合规则的正则表达式
var userReg =/^[a-zA-Z0-9_-]{3,16}$/;
//验证用户名是否符合规则
if(!userReg.test(username)){
alert("请输入3-16位字母数字下划线的用户名");
return false;
}
var password=$("#pwd").val();
//设置一个用户名是否符合规则的正则表达式
var passReg =/^[a-zA-Z0-9_-]{3,16}$/;
//验证用户名是否符合规则
if(!passReg.test(password)){
alert("请输入3-16位字母数字下划线的密码");
return false;
}
var password2=$("#rePwd").val();
if(password !== password2){
password2="";
alert("两次输入的密码不相符");
return false;
}
var email=$("#email").val();
var emailReg=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
if(!emailReg.test(email)){
alert("邮箱格式不正确");
return false;
}
});
//注册过程中，通过发送Ajax请求验证用户名是否可用
$("#username").change(function(){
alert("haha");
var username=$(this).val();
var url="CheckUserNameServlet";
var params="username="+username;
$.post(url,
params,
function(res){$("#msgSpan").html(res);},
"text"
);
});
});
</script>
</head>
<body>
<h1>欢迎注册</h1><br>
<form action="RegistServlet" method="post">
用户名称：<input type="text" name="username" id="username"><span id=msgSpan></span><br/>
用户密码：<input type="password" name="password" id="pwd"><br>
确认密码：<input type="password" name="reRwd" id="rePwd"><br>
用户邮箱：<input type="text" name="email" id="email"><br>
<input type="submit" id="sub" value="登录">
</form>
</body>
</html></code></pre>
<p> </p>
<p>2.Servlet页面：CheckUserNameServlet.java</p>
<pre>
<code>package com.hy.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hy.dao.UserDao;
import com.hy.dao.impl.UserDaoImpl;
public class CheckUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckUserNameServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
System.out.println(username);
UserDao userDao = new UserDaoImpl();
boolean flag=userDao.checkUserName(username);
response.setContentType("text/html;charset=UTF-8");
if(flag) {
response.getWriter().write("<font color='red'>用户名已存在</font>");
}else {
response.getWriter().write("<font color='green'>用户名可用</font>");
}
}
}
</code></pre>
<p> </p>
<p>本文地址：https://blog.csdn.net/weixin_40370904/article/details/107885385</p> </div>
<div class="tags">
相关标签： <a href="/t/web+%E5%89%8D%E7%AB%AF/" target="_blank">
web 前端 </a>
<a href="/t/web/" target="_blank">
web </a>
<a href="/t/jquery/" target="_blank">
jquery </a>
</div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/99122.html">
JSON 控制json的输出顺序（怎么存放怎么输出） </a>
</p>
<p>
下一篇： <a href="/article/99124.html">
vue学习笔记（一） ---- vue指令（总体大纲） </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2128766.html" target="_blank" title="基于jQuery实现Ajax验证用户名是否可用实例">
<h2>
基于jQuery实现Ajax验证用户名是否可用实例 </h2>
</a>
</li>
<li>
<a href="/article/2065267.html" target="_blank" title="Ajax验证用户名或昵称是否已被注册">
<h2>
Ajax验证用户名或昵称是否已被注册 </h2>
</a>
</li>
<li>
<a href="/article/1774317.html" target="_blank" title="JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）">
<h2>
JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp） </h2>
</a>
</li>
<li>
<a href="/article/1489484.html" target="_blank" title="注册功能通过Ajax请求验证用户名是否可用">
<h2>
注册功能通过Ajax请求验证用户名是否可用 </h2>
</a>
</li>
<li>
<a href="/article/1318795.html" target="_blank" title="php ajax注册验证用户名是否存在代码">
<h2>
php ajax注册验证用户名是否存在代码 </h2>
</a>
</li>
<li>
<a href="/article/1277678.html" target="_blank" title="php ajax注册验证用户名是否存在代码">
<h2>
php ajax注册验证用户名是否存在代码 </h2>
</a>
</li>
<li>
<a href="/article/1224264.html" target="_blank" title="php ajax注册验证用户名是否存在代码_PHP教程">
<h2>
php ajax注册验证用户名是否存在代码_PHP教程 </h2>
</a>
</li>
<li>
<a href="/article/1218404.html" target="_blank" title="Ajax验证用户名或昵称是否已被注册">
<h2>
Ajax验证用户名或昵称是否已被注册 </h2>
</a>
</li>
<li>
<a href="/article/1167100.html" target="_blank" title="Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）_jquery">
<h2>
Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）_jquery </h2>
</a>
</li>
<li>
<a href="/article/1024495.html" target="_blank" title="PHP+Ajax异步通讯实现用户名邮箱验证是否已注册 2种方法实现">
<h2>
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册 2种方法实现 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>