注册功能通过Ajax请求验证用户名是否可用

最新推荐文章于 2022-12-04 13:36:26 发布

全宇宙超级无敌月光霹雳老少女

最新推荐文章于 2022-12-04 13:36:26 发布

阅读量230

点赞数

分类专栏： web 前端文章标签： web jquery

本文链接：https://blog.csdn.net/weixin_40370904/article/details/107885385

版权

web 前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.创建一个动态Web项目，版本2.5，下面是目录：

2.前端页面： reg.jsp

<%@ 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>

2.Servlet页面：CheckUserNameServlet.java

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>");
		}
	}

}

全宇宙超级无敌月光霹雳老少女

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
注册功能通过Ajax请求验证用户名是否可用

1.创建一个动态Web项目，版本2.5，下面是目录：2.前端页面：reg.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here&l..
复制链接

扫一扫