当前位置： 移动技术网 > IT编程>开发语言>Java > 注册功能通过Ajax请求验证用户名是否可用

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

2020年08月10日  | 移动技术网IT编程  | 我要评论

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

}

 

本文地址：https://blog.csdn.net/weixin_40370904/article/details/107885385

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网