Ajax如何实现注册登陆验证

最新推荐文章于 2022-12-05 00:51:31 发布
最新推荐文章于 2022-12-05 00:51:31 发布
阅读量1.1k 收藏
点赞数
分类专栏： Web启示录 [基础篇] 文章标签： Ajax Web前端 互联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29025139/article/details/46795839
版权

jsp页面部分：通过JS进行客户端的表单验证，主要验证表单的格式、输入是否正确，使用这种方式可以避免在提交之后才返回一个简单的输入错误，在网速较慢的情况下更能提高效率。 
   
   

    
    

     
     <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    

    
    

     
     <%@page language="java" contentType="text/html;charset=GBK"%>
    
    

    
    

     
     <html>
    
    

    
    

     
     <head>
    
    

    
    

     
     <script language="javascript" type="text/javascript">
    
    

    
    

     
     <!--
    
    

    
    

     
      
    
    

    
    

     
      var http = getHTTPObject();
    
    

    
    

     
      function handleHttpResponse(){
    
    

    
    

     
     //判断xmlHttpRequest对象的状态
    
    

    
    

     
      　if(http.readyState == 4){
    
    

    
    

     
      　if(http.status == 200){
    
    

    
    

     
      　　var xmlDocument = http.responseXML;
    
    

    
    

     
     //如果返回值不为空
    
    

    
    

     
      　　　if(http.responseText!=""){
    
    

    
    

     
     //显示返回内容
    
    

    
    

     
      　　　　document.getElementById("showStr").style.display = "";
    
    

    
    

     
      　　　　　document.getElementById("userName").style.background= "#FF0000";
    
    

    
    

     
      　　　　　document.getElementById("showStr").innerText = http.responseText;
    
    

    
    

     
      　　　}else{
    
    

    
    

     
     //如果返回值为空，不显示
    
    

    
    

     
      　　　　document.getElementById("userName").style.background= "#FFFFFF";
    
    

    
    

     
      　　　　document.getElementById("showStr").style.display = "none";
    
    

    
    

     
      　　　}
    
    

    
    

     
      
    
    

    
    

     
      　　}
    
    

    
    

     
      　　else{
    
    

    
    

     
      　　　alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
    
    

    
    

     
      　　　alert(http.status);
    
    

    
    

     
      　　}
    
    

    
    

     
      　}
    
    

    
    

     
      }
    
    

    
    

     
      function handleHttpResponse1(){
    
    

    
    

     
      　if(http.readyState == 4){
    
    

    
    

     
      　　if(http.status == 200){
    
    

    
    

     
      　　　var xmlDocument = http.responseXML;
    
    

    
    

     
      　　　if(http.responseText!=""){
    
    

    
    

     
      　　　　document.getElementById("comNmStr").style.display = "";
    
    

    
    

     
      　　　　document.getElementById("comNm").style.background= "#FF0000";
    
    

    
    

     
      　　　　document.getElementById("comNmStr").innerText = http.responseText;
    
    

    
    

     
      　　　}else{
    
    

    
    

     
      　　　　document.getElementById("comNm").style.background= "#FFFFFF";
    
    

    
    

     
      　　　　document.getElementById("comNmStr").style.display = "none";
    
    

    
    

     
      　　　}
    
    

    
    

     
      
    
    

    
    

     
      　　}
    
    

    
    

     
      　　else{
    
    

    
    

     
      　　　alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
    
    

    
    

     
      　　　alert(http.status);
    
    

    
    

     
      　　}
    
    

    
    

     
      　}
    
    

    
    

     
      }
    
    

    
    

     
      
    
    

    
    

     
     //检测用户名称
    
    

    
    

     
      function chkUser(){
    
    

    
    

     
      　var url = "/chkUserAndCom";
    
    

    
    

     
      　var name = document.getElementById("userName").value;
    
    

    
    

     
      　url += ("&userName="+name+"&oprate=chkUser");
    
    

    
    

     
      　http.open("GET",url,true);
    
    

    
    

     
      　http.onreadystatechange = handleHttpResponse;
    
    

    
    

     
      　http.send(null);
    
    

    
    

     
      　return ;
    
    

    
    

     
      }
    
    

    
    

     
     //检测企业名称
    
    

    
    

     
      function chkComNm(){
    
    

    
    

     
      　var url = "/chkUserAndCom";
    
    

    
    

     
      　var name = document.getElementById("comNm").value;
    
    

    
    

     
      　url += ("&comName="+name+"&oprate=chkCom");
    
    

    
    

     
      　http.open("GET",url,true);
    
    

    
    

     
      　http.onreadystatechange = handleHttpResponse1;
    
    

    
    

     
      　http.send(null);
    
    

    
    

     
      　return ;
    
    

    
    

     
      }
    
    

    
    

     
      
    
    

    
    

     
      //该函数可以创建需要的XMLHttpRequest对象
    
    

    
    

     
      function getHTTPObject(){
    
    

    
    

     
      　var xmlhttp = false;
    
    

    
    

     
      　if(window.XMLHttpRequest){
    
    

    
    

     
      　　xmlhttp = new XMLHttpRequest();
    
    

    
    

     
      　　if(xmlhttp.overrideMimeType){
    
    

    
    

     
      　　　xmlhttp.overrideMimeType('text/xml');
    
    

    
    

     
      　　}
    
    

    
    

     
      　}
    
    

    
    

     
      　else{
    
    

    
    

     
      　　try{
    
    

    
    

     
      　　　xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    
    

    
    

     
      　　}catch(e){
    
    

    
    

     
      　　　try{
    
    

    
    

     
      　　　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    
    

    
    

     
      　　　}catch(E){
    
    

    
    

     
      　　　　xmlhttp = false;
    
    

    
    

     
      　　　}
    
    

    
    

     
      　　}
    
    

    
    

     
      　}
    
    

    
    

     
      　return xmlhttp;
    
    

    
    

     
      }
    
    

    
    

     
      
    
    

    
    

     
      
    
    

    
    

     
     //检测表单输入是否合法
    
    

    
    

     
     function chkpassword()
    
    

    
    

     
     {
    
    

    
    

     
      
    
    

    
    

     
     //获取表单
    
    

    
    

     
     var m=document.form1;
    
    

    
    

     
     //判断密码输入是否合法
    
    

    
    

     
      if(len(m.password.value) > 20 || len(m.password.value) < 5 || !isStr(m.password.value))
    
    

    
    

     
      {
    
    

    
    

     
      　document.getElementById("passwordStr").style.display = "";
    
    

    
    

     
     　 document.getElementById("password").style.background= "#FF0000";
    
    

    
    

     
     　 document.getElementById("passwordStr").innerText = "对不起,密码必须为英文字母、数字或下画线，长度为5~20!";
    
    

    
    

     
      }
    
    

    
    

     
      else
    
    

    
    

     
      {
    
    

    
    

     
     　 document.getElementById("password").style.background= "#FFFFFF";
    
    

    
    

     
     　 document.getElementById("passwordStr").style.display = "none";
    
    

    
    

     
      }
    
    

    
    

     
     }
    
    

    
    

     
     //判断第二次输入是否合法、一致
    
    

    
    

     
     function chkconfirmPassword()
    
    

    
    

     
     {
    
    

    
    

     
     　 var m=document.form1;
    
    

    
    

     
     　 if (m.password.value != m.confirmPassword.value)
    
    

    
    

     
     　 {
    
    

    
    

     
     　　 document.getElementById("confirmPasswordStr").style.display = "";
    
    

    
    

     
     　　document.getElementById("confirmPassword").style.background= "#FF0000";
    
    

    
    

     
     　　 document.getElementById("confirmPasswordStr").innerText = "对不起,密码与重复密码不一致!";
    
    

    
    

     
     　 }
    
    

    
    

     
     　 else
    
    

    
    

     
     　 {
    
    

    
    

     
     　　document.getElementById("confirmPassword").style.background= "#FFFFFF";
    
    

    
    

     
     　　 document.getElementById("confirmPasswordStr").style.display = "none";
    
    

    
    

     
     　 }
    
    

    
    

     
     }
    
    

    
    

     
     //判断所有文本框中的输入
    
    

    
    

     
     function checkfield()
    
    

    
    

     
     {
    
    

    
    

     
      var m=document.form1; 
    
    

    
    

     
      if(m.userName.value.length==0)
    
    

    
    

     
      {
    
    

    
    

     
     　 alert("对不起,用户名必须为英文字母、数字或下画线，长度为5~20。");
    
    

    
    

     
     　 m.userName.focus();
    
    

    
    

     
     　 return false;
    
    

    
    

     
      }
    
    

    
    

     
      if(m.password.value.length==0)
    
    

    
    

     
      {
    
    

    
    

     
     　 alert("对不起,密码必须为英文字母、数字或下画线，长度为5~20。");
    
    

    
    

     
     　 m.password.focus();
    
    

    
    

     
     　 return false;
    
    

    
    

     
      }
    
    

    
    

     
      if (m.password.value != m.confirmPassword.value)
    
    

    
    

     
      {
    
    

    
    

     
     　 alert("对不起,密码与重复密码不一致!");
    
    

    
    

     
     　 m.confirmPassword.focus();
    
    

    
    

     
     　 return false;
    
    

    
    

     
      } 
    
    

    
    

     
      if(m.comNm.value.length==0)
    
    

    
    

     
      {
    
    

    
    

     
     　 alert("对不起,企业名称不能为空！！");
    
    

    
    

     
     　 m.comNm.focus();
    
    

    
    

     
     　 return false; 
    
    

    
    

     
      }
    
    

    
    

     
      m.submit();
    
    

    
    

     
     }
    
    

    
    

     
     //--> 
    
    

    
    

     
     </script>
    
    

    
    

     
     </head>
    
    

    
    

     
     <body topmargin="0">
    
    

    
    

     
     <form name="form1" method="post" action="/Control?act=Register">
    
    

    
    

     
     <table width="100%">
    
    

    
    

     
      <tr><td align="center"> <H1>Ajax 演示程序</H1></td></tr>
    
    

    
    

     
      <tr><td align="center">    ------ 企业注册 By Alpha</td></tr>
    
    

    
    

     
     </table>
    
    

    
    

     
     <HR>
    
    

    
    

     
      <table width="400" border="0" cellpadding="1" cellspacing="1" align="center" >
    
    

    
    

     
      <tr>
    
    

    
    

     
     　 <td><font color="red">*</font></td>
    
    

    
    

     
     　 <td>用户帐号:</td>
    
    

    
    

     
     　 <td>
    
    

    
    

     
     　　 <input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/>
    
    

    
    

     
     　　 <div id="showStr" style="background-color:#FF9900;display:none"></div>
    
    

    
    

     
     　 </td> 
    
    

    
    

     
      </tr>
    
    

    
    

     
      <tr>
    
    

    
    

     
     　 <td><font color="red">*</font></td>
    
    

    
    

     
     　 <td>企业名称:</td>
    
    

    
    

     
     　 <td>
    
    

    
    

     
     　　 <input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/>
    
    

    
    

     
     　　 <div id="comNmStr" style="background-color:#FF9900;display:none"></div>
    
    

    
    

     
      
    
    

    
    

     
     　 </td> 
    
    

    
    

     
      </tr> 
    
    

    
    

     
      <tr>
    
    

    
    

     
     　 <td><font color="red">*</font></td>
    
    

    
    

     
     　 <td>用户密码:</td>
    
    

    
    

     
     　 <td><input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/>
    
    

    
    

     
     　　 <div id="passwordStr" style="background-color:#FF9900;display:none"></div>
    
    

    
    

     
     　 </td>
    
    

    
    

     
      </tr>
    
    

    
    

     
      <tr>
    
    

    
    

     
     　 <td><font color="red">*</font></td>
    
    

    
    

     
     　 <td>确认密码:</td>
    
    

    
    

     
     　 <td><input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/>
    
    

    
    

     
     　　 <div id="confirmPasswordStr" style="background-color:#FF9900;display:none"></div>
    
    

    
    

     
     　 </td> 
    
    

    
    

     
      </tr>
    
    

    
    

     
      </table> 
    
    

    
    

     
      <div align="center"> 
    
    

    
    

     
     　 <input type="button" name="ok" value=" 确 定 " onclick="checkfield()"> <input type="reset" name="reset" value=" 取 消 ">
    
    

    
    

     
      </div>
    
    

    
    

     
     </form>
    
    

    
    

     
     </body>
    
    

    
    

     
     </html>


servlet部分:进行数据库方面的验证，主要用于查看在数据库中有没有存在该用户或企业。 
   
   

    
    

     
     package com.event;
    
    

    
    

     
     import javax.servlet.ServletException;
    
    

    
    

     
     import javax.servlet.http.HttpServletRequest;
    
    

    
    

     
     import javax.servlet.http.HttpServletResponse;
    
    

    
    

     
     import com.beans.EBaseInfo;
    
    

    
    

     
     public class CheckUserAndComNm {
    
    

    
    

     
      private String msgStr = "";
    
    

    
    

     
      protected void doGet(HttpServletRequest request,HttpServletResponse response) 
    
    

    
    

     
      throws ServletException 
    
    

    
    

     
      { 
    
    

    
    

     
      　EComBaseInfo info=new EComBaseInfo();
    
    

    
    

     
     //获取请求中的参数
    
    

    
    

     
     　String oprate=request.getParameter("oprate")).trim(); 
    
    

    
    

     
      　String userName=request.getParameter("userName");
    
    

    
    

     
      　String passWord=request.getParameter("password");
    
    

    
    

     
      　String comName=request.getParameter("comName");
    
    

    
    

     
      
    
    

    
    

     
      　try
    
    

    
    

     
      　{
    
    

    
    

     
     //判断是否是检查用户名
    
    

    
    

     
      　　if(oprate.equals("chkUser"))
    
    

    
    

     
      　　{
    
    

    
    

     
      　　　response.setContentType("text/html;charset=GB2312");
    
    

    
    

     
      　　　if(userName.length()＜5||userName.length()＞20)
    
    

    
    

     
      　　　{
    
    

    
    

     
      　　　　msgStr = "对不起,用户名必须为字母、数字或下画线，长度为5-20个字符!";
    
    

    
    

     
      　　　}
    
    

    
    

     
      　　　else
    
    

    
    

     
      　　　{
    
    

    
    

     
      　　　　boolean bTmp=info.findUser(userName); 
    
    

    
    

     
      　//查询数据库中有无该用户名
    
    

    
    

     
      　　　　if(bTmp) 
    
    

    
    

     
      　　　　　msgStr ="对不起,此用户名已经存在,请更换用户名注册!";
    
    

    
    

     
      　　　　else
    
    

    
    

     
      　　　　　msgStr ="";
    
    

    
    

     
      　　　}
    
    

    
    

     
      　　　response.getWriter().write(msgStr);
    
    

    
    

     
      　　}
    
    

    
    

     
      　//检查企业名
    
    

    
    

     
      　　else if(oprate.equals("chkCom"))
    
    

    
    

     
      　　{
    
    

    
    

     
     　　　response.setContentType("text/html;charset=GB2312");
    
    

    
    

     
      　　　if(comName.length()＜6||comName.length()＞100)
    
    

    
    

     
      　　　{
    
    

    
    

     
      　　　　msgStr = "对不起,公司名称长度为6-100个字符(不包括字符内的空格)!";
    
    

    
    

     
      　　　}
    
    

    
    

     
      　　　else
    
    

    
    

     
      　　　{
    
    

    
    

     
      　　　　boolean bTmp=info.findCom(comName); 
    
    

    
    

     
      　　//查找数据库中有无该企业名
    
    

    
    

     
      　　　　if(bTmp) 
    
    

    
    

     
      　　　　　msgStr ="对不起,此企业名称已经存在,请更换企业名称注册!";
    
    

    
    

     
      　　　　else
    
    

    
    

     
      　　　　　msgStr ="";
    
    

    
    

     
      　　　}
    
    

    
    

     
     　　　response.getWriter().write(msgStr);
    
    

    
    

     
      　　}
    
    

    
    

     
      　}
    
    

    
    

     
      　catch(Exception ex)
    
    

    
    

     
      　{
    
    

    
    

     
      　}
    
    

    
    

     
      　finally
    
    

    
    

     
      　{
    
    

    
    

     
      　　request.setAttribute("url",url);
    
    

    
    

     
      　}
    
    

    
    

     
      }
    
    

    
    

     
      protected void doPost(HttpServletRequest request,HttpServletResponse response) 
    
    

    
    

     
      throws ServletException 
    
    

    
    

     
      {
    
    

    
    

     
      　doGet(request,response);
    
    

    
    

     
      }
    
    

    
    

     
     }
chitry_
关注
专栏目录
使用Ajax实现登录验证
不因俊俏难为友，正为风流始读书
12-22 5798
get提交方式： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%> My JSP 'loginAjax.jsp' starting page body { text-align: center
用AJAX实现页面登陆以及注册用户名验证的简单实例
10-21
以下是一个简单的AJAX实现用户名验证的实例： 首先，创建XMLHttpRequest对象是关键。在JavaScript中，可以通过如下代码创建： ```javascript var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ...
ajax实现用户登录注册
07-28
ajax实现用户登录注册，完整的验证，经过调试，适合初学者
【ajax】ajax异步实现用户注册验证
dingchanjuan4613的博客
12-10 355
从前台到后台实现简单用户注册检查用户是否存在 1.编写domain public class User { private String username; private String password; public String getUsername() { return username; } public void ...
通过Ajax实现注册登陆的表单验证，一看就会。
最新发布
qq_60614034的博客
12-05 3022
ajax的简单应用，简单好懂。本次运用的软件为ideal，使用的是tomcat服务器，无框架编程。Asynchronous JavaScript And XML是一种通过JavaScript和后台进行通信的技术，能够实现页面的局部刷新，提高用户的体验常规页面刷新会更新整个页面。ajax技术通过浏览器局部发送请求给后台，后台通过resp.getWriter.print("");响应给前台页面 服务器具体实现代码： 浏览器代码： 注册代码： 登陆代码： 至于为什么要用jq
登录注册AJAX
weixin_44081699的博客
02-27 328
$("#butn").click(function(){ $.ajax({ url: 'http://101.132.40.198:8181/login', type: 'post', data: { username: document.getElementById('inp1').value, ...
ajax实现简单登录验证
10-12
在本文中，我们将深入探讨如何使用Ajax技术实现一个简单的登录验证功能。Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），允许我们在不刷新整个网页的情况下与服务器进行交互，从而提供更流畅的...
AJAX+JAVA用户登陆注册验证的实现代码
08-27
AJAX+JAVA用户登陆注册验证的实现代码 本文将介绍使用AJAX和JAVA实现用户登陆注册验证的实现代码，通过ajax异步刷新页面验证用户输入的账号密码是否在数据库中存在。本文将详细讲解实现代码的技术栈、JSP部分、...
使用Ajax完成简单的账号登录认证
Amazing66的博客
07-13 235
什么是Ajax？ Ajax：异步的js and xml 通俗的说 就是我们做出一个操作的时候不需要刷新页面 就可以及时的给出反馈 导包 首先我们需要导入Jquary的配置文件 可以引用在线cdn，也可以提前下载 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 然后配置Springmvc的配置文件 <?xml version="1.0" encoding="UTF-8"?> &l.
Ajax实现注册登录校验
weixin_46295656的博客
05-08 3085
Ajax实现注册登录校验 1.在做项目的时候，或多或少都会用到ajax来实现注册登录的校验，例如，当你注册时，你输入一个用户名，就会提示你，用户名可用，或者，用户名已被注册 ，等等 ，就像下图这种。 接下来我们就实现一下这个简单的实例吧。 1.Controller的编写，这里为了方便，就伪造一个用户名密码。 @RequestMapping("user/reg") @ResponseBody public String login(String name, String pwd){
Ajax实现登录验证
06-24
Ajax实现的登录页面，能够不刷新页面直接登录
AJAX入门的简单实例（登录表单验证）
05-27
# 前置知识 HTML、Java、JavaScript、servlet、tomcat 基础知识 # AJAX实例 使用AJAX的 登录表单验证 简单案例 以登录界面为例，首先编写登录页面 login.jsp 如果登录成功，则界面显示登录成功后的页面 如果登录失败，则界面显示登录失败后的页面 在登录时，浏览器窗口不刷新，浏览器地址栏上的地址不变，网页上其他部分的浏览不受影响。
jQuery+ajax实现简单登录验证
12-13
本人亲自写的jQuery+ajax实现登录验证，内含两个项目，注释清晰，特来和大家分享
用ajax做的登陆注册
10-18
对于初学者来说,很实用的,希望我们共同学习,一起攻克ajax技术,由于时间关系,界面不是很好,但不过,您可以改一下就OK了
Ajax之简单验证登录注册
Welkin_qing的博客
12-20 942
一、 传统Ajax注册登录 html主页： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp
使用ajax实现简单的注册验证
qq_40910095的博客
07-31 392
<!DOCTYPE html> <html> <head> <title> </title> <meta charset='utf-8'> </head> <body> <input type="text" id='name'> <span id="tip"></...
【AJAX】实现登录验证·教程
qq_45677671的博客
02-24 1828
效果图： HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
使用ajax来验证登录
weixin_56863206的博客
08-08 1296
使用ajax来验证登录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值