利用ajax和jquery验证登录验证

最新推荐文章于 2021-08-05 12:10:11 发布

qq_2417580538

最新推荐文章于 2021-08-05 12:10:11 发布

阅读量823

点赞数 2

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_2417580538/article/details/102771129

版权

Jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本次书写的是用Ajax和jQuery来写一个用于用户登录验证用户名和密码是否一致，是否符合给定的正则表达式并且连接数据库，目前只具有登录验证功能，后续功能尽情期待。
用的是mvc结构，所用的包有bean,service,serviceImpl,servlet
1.User.java

package cn.hnpi.bear;

public class User {
	private Integer id;
	private String name;
	private String pwd;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public User() {
		super();
		// TODO Auto-generated constructor stub
	}
	public User(Integer id, String name, String pwd) {
		super();
		this.id = id;
		this.name = name;
		this.pwd = pwd;
	}
	
}

2.UserService

package cn.hnpi.service;

import java.util.List;

import cn.hnpi.bear.User;

public interface UserService {

	/**
	 * 查询所有的用户
	 * @return
	 */
	public List<User> serlectUserAll();
}

3.UserServiceImpl

package cn.hnpi.service.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import cn.hnpi.bear.User;
import cn.hnpi.service.UserService;
import cn.hnpi.util.DBUtil;

public class UserServiceImpl implements UserService {

	public List<User> serlectUserAll() {
		Connection conn = DBUtil.getConn();
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<User> users = new ArrayList<User>();
		String sql = "select * from user";
		try {
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			if (rs.next()) {
				User user = new User();
				user.setId(rs.getInt(1));
				user.setName(rs.getString(2));
				user.setPwd(rs.getString(3));
				users.add(user);
			}
		} catch (SQLException e) {
			// TODO: handle exception
			e.printStackTrace();
		}finally{
			DBUtil.closeConn(conn, ps, rs);
		}
		return users;
	}
}

4.AjaxServlet

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.hnpi.bear.User;
import cn.hnpi.service.UserService;
import cn.hnpi.service.impl.UserServiceImpl;


public class AjaxServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		//自定义用户名和密码可更改
		UserService userService = new UserServiceImpl();
		User user = new User();
		String nameAjax = request.getParameter("name");
		String pwdAjax = request.getParameter("pwd");
		String name = user.getName();
		String pwd = user.getPwd();
		if (name.equals(nameAjax) && pwd.equals(pwdAjax)) {
			out.print("ok");
		}else{
			out.print("error");
		}
		
		out.flush();
		out.close();
	}

}

jsp:index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录页面</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery.js"></script>
	<style>
		html{   
		    width: 100%;   
		    height: 100%;   
		    overflow: hidden;   
		    font-style: sans-serif;   
		}   
		body{   
		    width: 100%;   
		    height: 100%;   
		    font-family: 'Open Sans',sans-serif;   
		    margin: 0;   
		    background-color: #4A374A;   
		}   
		#login{   
		    position: absolute;   
		    top: 50%;   
		    left:50%;   
		    margin: -150px 0 0 -150px;   
		    width: 300px;   
		    height: 300px;   
		}   
		#login h1{   
		    color: #fff;   
		    text-shadow:0 0 10px;   
		    letter-spacing: 1px;   
		    text-align: center;   
		}   
		h1{   
		    font-size: 2em;   
		    margin: 0.67em 0;   
		}   
		input{   
		    width: 278px;   
		    height: 18px;   
		    margin-bottom: 10px;   
		    outline: none;   
		    padding: 10px;   
		    font-size: 13px;   
		    color: #fff;   
		    text-shadow:1px 1px 1px;   
		    border-top: 1px solid #312E3D;   
		    border-left: 1px solid #312E3D;   
		    border-right: 1px solid #312E3D;   
		    border-bottom: 1px solid #56536A;   
		    border-radius: 4px;   
		    background-color: #2D2D3F;   
		}   
		.but{   
		    width: 300px;   
		    min-height: 20px;   
		    display: block;   
		    background-color: #4a77d4;   
		    border: 1px solid #3762bc;   
		    color: #fff;   
		    padding: 9px 14px;   
		    font-size: 15px;   
		    line-height: normal;   
		    border-radius: 5px;   
		    margin: 0;   
		}  
	</style>
  </head>
  
  <body>
    <div id="login">  
        <h1>Login</h1>  
        <form method="post">  
            <input type="text" required="required" placeholder="用户名" name="name" id="name" onblur="check_name()"></input><span id="nameReg"></span>  
            <input type="password" required="required" placeholder="密码" name="pwd" id="pwd" onblur="check_pwd()"></input><span id="pwdReg"></span>
            <button class="but" type="submit">登录</button>  
        </form>  
    </div>
    <script type="text/javascript">
    	//js
    	function check_name() {
	      console.log(1);
	      //获取账号
	      var code = document.getElementById("name").value;
	      //校验其格式(\w字母或数字或下划线)
	      var span = document.getElementById("nameReg");
	      var reg = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
	      if(reg.test(code)) {
	        //通过，增加✓样式
	        span.innerText = "✓";
	        span.style.color = "green";
	      } else {
	        //不通过，增加✗样式
	        span.innerText = "✗";
	        span.style.color = "red";
	      }
	   }
    function check_pwd(){
       console.log(2);
       var code2 = document.getElementById("pwd").value;
       var span2 = document.getElementById("pwdReg");
       var reg2 = /^(\w){6,20}$/;
       if(reg2.test(code2)) {
	        span2.innerText = "✓";
	        span2.style.color = "green";
	      } else {
	        span2.innerText = "✗";
	        span2.style.color = "red";
       } 
    }	
    $(function(){
    	$(":button").on("click",function(){
    		$.ajax({
    			url:"test",
    			type:"post",
    			data:{
    				name:$("#name").val(),
    				pwd:$("#pwd").val()
    			},
    			dataType:"text",
    			success:function(data){
    				if(data == "ok"){
    					window.location.href = "test.jsp";
    				}else{
    					alert("用户名或密码输入错误，请重新输入!");
    				}
    			}
    		});
    	});
    });
    </script> 
  </body>
</html>

如有问题请及时联系作者，会进行及时的更改

qq_2417580538

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用ajax和jquery验证登录验证

本次书写的是用Ajax和jQuery来写一个用于用户登录验证用户名和密码是否一致，是否符合给定的正则表达式并且连接数据库，目前只具有登录验证功能，后续功能尽情期待。用的是mvc结构，所用的包有bean,service,serviceImpl,servlet1.User.javapackage cn.hnpi.bear;public class User { private Intege...
复制链接

扫一扫