ajax用户名验证

最新推荐文章于 2024-07-18 16:36:56 发布
最新推荐文章于 2024-07-18 16:36:56 发布
阅读量786 收藏
点赞数
分类专栏： DOWN的文章 文章标签： ajax xmlhttprequest function 数据库 服务器 session
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lilei0015/article/details/2900651
版权
register.jsp:
<[email=%@page]%@page[/email] contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=gb2312">
<title>注册表单验证</title>
<style type="text/css">
/* 页面字体样式 */
body, td, input {
    font-family:Arial;
    font-size:12px;
}
/* 表格基本样式 */
table.default {
    border-collapse:collapse;
    width:300px;
}
/* 表格单元格样式 */
table.default td {
    border:1px solid black;
    padding:3px;
}
/* 列头样式 */
table.default td.item {
    background:#006699;
    color:#fff;
}
/* 正常信息样式 */
div.ok {
    color:#006600;
}
/* 警告信息样式 */
div.warning {
    color:#FF0000;
}
</style>
<!-- 引入外部checker.js文件 -->
<script type="text/javascript" src="checker.js"></script>
</head>
<body>
<jsp:include page="../head.jsp"></jsp:include>
<h1>注册</h1>
<form method="post" action="register.jsp" οnsubmit="alert('后面的注册过程与传统方式相同。');return false">
<table class="default">
<tr>
    <td class="item" width="30%">用户名：</td>
    <td width="70%">
        <input type="text" name=" name " id=" name " οnblur="Checker.checkNode(this)">
        <div id=" name CheckDiv" class="warning">请输入用户名。</div>
    </td>
</tr>
<tr>
    <td class="item">密码：</td>
    <td>
        <input type="password" name="password" id="password" οnblur="Checker.checkPassword()">
        <div id=" password CheckDiv" class="warning">请输入密码。</div>
    </td>
</tr>
<tr>
    <td class="item">密码验证：</td>
    <td>
        <input type="password" name="password2" id="password2" οnblur="Checker.checkPassword()">
        <div id=" password2 CheckDiv" class="warning">请再次输入密码。</div>
    </td>
</tr>
<tr>
    <td colspan="2" align="center">
        <input type="submit" value="注册">
    </td>
</tr>
</table>
</form>
<jsp:include page="../bottom.jsp"></jsp:include>
</body>
</html>

checker.jsp
<%@ page contentType="text/plain; charset=gb2312"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,com.ssit.DB.*"%>
<%!
    //查询数据库是否存在相同信息
    boolean hasSameValue(String name, String value) {
        boolean result = false;                                                                 //保存检测结果
        //定义查询数据库的SQL语句
        String sql = "select * from GYNW.B_EXTERNAL_USER where " + name + " = ?"; 
       Connection conn = null;                                                     //声明Connection对象
        PreparedStatement pstmt = null;                                               //声明PreparedStatement对象
        ResultSet rs = null;                                                              //声明ResultSet对象
        try {
            conn =new Connect().getConnection();                           //获取数据库连接
            pstmt = conn.prepareStatement(sql);                      //根据sql创建PreparedStatement
            pstmt.setString(1, value);                                           //设置参数
            rs = pstmt.executeQuery();                                        //执行查询，返回结果集
            //根据结果集是否存在决定查询结果
            if (rs.next()) {
                result = true;
            } else {
                result = false;
            }
        } catch (SQLException e) {
            System.out.println(e.toString());
        } finally {
        if(conn!=null){
        try{
        conn.close();
        }catch(Exception re){
        re.getMessage();
        }
        }
        }
        return result;
    }
%>
<%
    out.clear();                                                                                     //清空当前的输出内容（空格和换行符）
    request.setCharacterEncoding("UTF-8");                               //设置请求体字符编码格式为UTF-8
    String ch_name = request.getParameter("name");                     //获取name参数
    String value = request.getParameter("value");                      //获取value参数
    String info = null;                                                                         //用于保存提示对象的名称
    //如果需要判断的是验证码，采用session方式验证
    if ("code".equals(ch_name)) {
        //获取session中保存的验证码
        String sessionCode = (String) session.getAttribute("_CODE_");
        //根据对比结果输出响应信息
        if (value != null && value.equals(sessionCode)) {
            out.print("1验证码正确。");
        } else {
            out.print("0验证码错误。");
        }
    } else {
        //根据name变量确定提示对象的名称
        if ("name".equals(ch_name)) {
            info = "用户名";
        }
        if (hasSameValue(ch_name, value)) {
            out.print("0该" + info + "已存在，请更换" + info + "。");
        } else {
            out.print("1该" + info + "可正常使用。");
        }
    }
%>
checker.js
var Checker = new function() {
    this._url = "checker.jsp";                                                                      //服务器端文件地址
    this._infoDivSuffix = " CheckDiv ";                                                      //提示信息div的统一后缀
    //检查普通输入信息
    this.checkNode = function(_node) {
        var nodeId = _node.id;                                                                          //获取节点id
        if (_node.value!="") {
            var xmlHttp=this.createXmlHttp();                                               //创建XmlHttpRequest对象
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4) {
                    //调用showInfo方法显示服务器反馈信息
                    Checker.showInfo( nodeId  + Checker._infoDivSuffix,
                                        xmlHttp.responseText);
                }
            }
            xmlHttp.open("POST", this._url, true);
            xmlHttp.setRequestHeader(
                                     "Content-type","application/x-www-form-urlencoded");
            xmlHttp.send("name=" + encodeURIComponent(_node.id) +
                         //发送包含用户输入信息的请求体
                         "&value=" + encodeURIComponent(_node.value));
        }
    }
    //显示服务器反馈信息
    this.showInfo = function(_infoDivId, text) {
        var infoDiv = document.getElementById(_ infoDivId ); //获取显示信息的div
        var status = text.substr(0,1);                                               //反馈信息的第一个字符表示信息类型
        if (status == "1") {
            infoDiv.className = "ok";                                         //检查结果正常
        } else {
            infoDiv.className = "warning";                               //检查结果需要用户修改
        }
        infoDiv.innerHTML = text.substr(1);                                 //写回详细信息
    }
    //用于创建XMLHttpRequest对象
    this.createXmlHttp = function() {
        var xmlHttp = null;
        //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
        if (window.XMLHttpRequest) {
           xmlHttp = new XMLHttpRequest();                             //FireFox、Opera等浏览器支持的创建方式
        } else {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
        }
        return xmlHttp;
    }
    //检查两次输入的密码是否一致
    this.checkPassword = function() {
        var p1 = document.getElementById("password").value;                //获取密码
        var p2 = document.getElementById("password2").value;             //获取验证密码
        //当两部分密码都输入完毕后进行判断
        if (p1 != "" && p2 != "") {
            if (p1 != p2) {
                this.showInfo("password2" + Checker._infoDivSuffix,
                                 "0密码验证与密码不一致。");
            } else {
                this.showInfo("password2" + Checker._infoDivSuffix, "1");
            }
        } else if (p1 != null) {
            this.showInfo("password" + Checker._infoDivSuffix, "1");
        }
    }
}
表结构


B_EXTERNAL_USER
NAME
VARCHAR2(30)
用户名
PWD
VARCHAR2(50)
密码
ADDRESS
VARCHAR2(200)
地址
COMPANY
VARCHAR2(200)
单位名称
IS_ADMIN
VARCHAR2(1)
是否管理员 ( 缺省为 ’0’)
lilei0015
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax 用户名验证是否存在
10-30
做一个表单验证里面最简单的例子，检查用户名是否存在，使用Ajax完成表单验证的正常步骤应该是
ajax用户名验证失败,ajax验证用户名是否可用遇到的问题
weixin_30171859的博客
08-05 250
我在做ajax验证用户名的，当用户名文本发生改变时调用ajax方法，并顺利返回提示，但是在提交时报下面这个错误，在网上也没有找到解决方法，望各位大虾帮忙 登陆界面：错误提示：代码：添加用户//表单为空的验证function check(){var a=document.getElementById("account");if(a.value.length==0){alert("用户名不可以为空！...
html ajax验证用户名密码,AJAX实现注册验证用户名
weixin_29322553的博客
06-03 590
本文实例为大家分享了AJAX实现注册验证用户名的具体代码，供大家参考，具体内容如下功能说明当用户在注册页面输入用户名并且鼠标焦点离开输入框时，到数据表中去验证该用户名是否已经存在，如果存在提示不可用，否则，提示可用。接口public interface UserDao {public User findName(String name);}接口实现类import java.sql.Connecti...
Ajax验证用户名是否可用
悬在半空的博客
12-04 954
使用Ajax实现注册验证功能。
ajax注册验证 asp.net,asp.net AJAX用户名验证
weixin_33545930的博客
08-05 98
前台代码:用户登陆var xmlHttp;function Validation(){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");var name=document.getElementById("Text1");xmlHttp.open("GET","index.aspx?"+name.value,true);xmlHttp.onreadysta...
利用ajax验证用户名,3.6.2 利用Ajax验证注册用户名（1）
weixin_32441957的博客
08-05 501
3.6.2 利用Ajax验证注册用户名(1)由于注册的用户比较多，如果能在客户端还没提交注册表单之前验证用户名是否可用，如果不可用则禁止提交，这样将大大减少网络流量和服务器负载。本节将介绍如何利用Ajax验证用户名唯一性。利用Ajax向服务器发送异步的请求，要先创建一个xmlHttpRequest对象，并得到用户填写的注册用户名，然后向服务器端发送验证请求。下面给出其JavaScript代码。代...
AJAX用户名验证
mqney.com的博客
01-11 1123
来源mqney　　１，AJAX一直不太理解，这次跟着教程（传智播客AJAX视频教程及其他网上文章）总算试验出来了一个简单的用户名验证过程。　　２，分为四个部分。html页面部分，css文件，js文件，Servlet文件。　　３，html部分。  用户名：                              User Name          <inputname="UserName
Ajax验证用户名体验
Java追求者的博客
05-13 63
Ajax验证用户名体验 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>login</title> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> fu
Ajax判断用户名是否存在
qq_62078665的博客
05-07 808
使用 Ajax在未提交表单时检测该用户名是否存在于数据库
Ajax进行用户名验证
童一的博客
03-31 282
学习目标： Ajax进行用户名验证 学习内容： Ajax进行用户名验证 学习时间： 学习产出： 接上篇 5、使用Ajax进行用户名验证 (1)、springmvc配置:springmvc-servlet.xml加入json乱码配置 <!--注解驱动--> <mvc:annotation-driven> <!--JSON乱码问题配置--> <mvc:message-converters register-def
ajax用户名存在验证,jQuery实现的Ajax 验证用户名是否存在源码
weixin_32843345的博客
08-05 121
1、请求页面AJax.aspxHTML代码div>div>JS代码function JudgeUserName(){$.ajax({type:"GET",url:"AjaxUserInfoModify.aspx",dataType:"html",data:"userName="+$("#txtName").val(),beforeSend:function(XMLHttpRequest...
基于Ajax用户名验证、服务条款加载、验证码生成的实现方法
09-05
Ajax，即Asynchronous JavaScript and XML，是一种用于创建快速动态网页的...用户名验证、服务条款加载和验证码生成都是Ajax技术在实际应用中的典型例子，它们共同展示了Ajax在提升Web应用性能和交互性方面的强大能力。
ajax实现用户名验证
02-09
以下是Ajax实现用户名验证的基本步骤： 1. 创建HTML表单：在HTML中设置一个输入框用于用户输入用户名，并添加一个按钮或链接来触发验证操作。例如： ```html 请输入用户名" /> 验证 ``` 2. 编写JavaScript代码...
webSocker消息推送，ajax轮询
weixin_43617604的博客
07-18 227
但是，传统的AJAX并不直接支持实时消息推送，因为它基于请求-响应模式。为了模拟消息推送，你可以使用轮询（polling）或长轮询（long-polling）技术。但是，传统的AJAX并不直接支持实时消息推送，因为它基于请求-响应模式。为了模拟消息推送，你可以使用轮询（polling）或长轮询（long-polling）技术。一旦建立了WebSocket连接，服务器和客户端就可以随时向对方发送消息，而不需要像AJAX那样频繁地发起请求。轮询是定期向服务器发送请求，以检查是否有新的消息。
初学SpringMVC之 Ajax 篇
m0_58838332的博客
07-13 578
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页，能够更新部分网页的技术。XMLHttpRequest（简称 xhr），是浏览器提供的 JS 对象，通过它可以请求到服务器上的数据资源。Ajax 不是编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序技术。使用 Ajax 技术的网页，通过在后台服务器进行少量的数据交换，就可以实现。xhr 允许进行异步请求，它可以在后台执行，而不会阻止页面的其他操作。（上述仅实现类似异步的模样，局部改变）
【精简版】jQuery 中的 Ajax 详解
weixin_46485638的博客
07-15 784
精简的 jQuery 中的 Ajax 详解。
AJAX基本用法
2303_80137294的博客
07-18 760
JavaScript中的Promise是一种处理异步操作的编程模式，它提供了更加优雅的方式来组织和管理异步代码，相较于传统的回调函数，Promise能够避免回调地狱（Callback Hell），使得代码更加清晰和易于维护。在JavaScript中，当多个异步操作依赖于彼此的结果时，如果使用传统的回调函数处理，代码会迅速变得嵌套复杂，难以阅读和维护，这种现象被称为“回调地狱”（Callback Hell）。)后面，多个参数之间用&符号分隔。语法，它基于Promise，提供了更加简洁的异步编程方式。
4 Ajax
最新发布
ever__ever的博客
07-18 592
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
js ajax验证用户名是否存在
06-07
可以通过使用Ajax来验证用户名是否存在，以下是一个简单的示例： HTML代码： ```html <input type="text" name="username" id="username" /> <button type="button" onclick="checkUsername()">检查用户名</button> <div id="username-check"></div> ``` JavaScript代码： ```javascript function checkUsername() { var username = document.getElementById("username").value; var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("username-check").innerHTML = this.responseText; } }; xhttp.open("POST", "check_username.php", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("username=" + username); } ``` 在这个示例中，当用户点击“检查用户名”按钮时，JavaScript函数`checkUsername()`会被调用。此函数会获取文本框中输入的用户名，并使用Ajax发送一个POST请求到`check_username.php`文件。 `check_username.php`文件应该包含用于检查用户名是否存在的逻辑，并返回一个响应。例如，如果用户名已存在，则可以返回一个带有文本“该用户名已被使用”或类似信息的响应。 在JavaScript函数中，当收到响应时，它会将响应文本显示在页面上的`<div>`元素中，该元素的ID为`username-check`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值