验证用户名是否存在
在js文件中主要需要4步
1、获取页面参数
2、对参数值可行性的验证
3、将数据发送到服务器中
4、在回调函数中将服务器返回的值,写到html页面上
主要业务流程如下
步骤1:准备客户端html页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>使用jquery做用户名验证</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify1.js"></script>
</head>
<body>
用户名:<input type="text" id="username" onblur="verify()"/> <span id="result"></span><br/>
密码:<input type="text" id="password"><br/>
</body>
</html>
步骤2:服务器servlet代码
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2009-10-22
* Time: 10:28:07
* To change this template use File | Settings | File Templates.
*/
public class validateUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//1.取参数
String old = request.getParameter("username");
//2.检查参数是否有问题
if(old == null || old.length()==0){
out.println("用户名不能为空");
}else{
//3.校验操作
String username = old;
if(username.equals("anmo")){
//4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新页面发送给用户
out.println("用户名["+username+"]已经存在,请使用其他用户名");
}else{
out.println("你可以使用此用户名!!!");
}
}
}
}
步骤3:准备JS文件,(本示例用了两个一个是jquery.js,一个是自己定义的js文件)下面的代码是自己定义的js
//定义用户名校验的方法
function verify(){
//1.获取文本框中的内容
//使用DOM方式获取:document.getElementById("username");
var jqueryObj = $("#username"); //使用JQuery方式查找节点
//2.取值
var username = jqueryObj.val();
//将文本框中的数据发送给服务器端的servlet
$.get("validateUserServlet?username="+username,null,callback); //使用jquery的XMLHTTTRequest对象get请求封装
}
//回调函数
function callback(data){
//3.接受客户端返回的数据
//alert(data); //data中是服务器返回给页面的值
//4.将服务器端返回的数据动态的显示在页面上
var resultObj = $("#result");
//动态改变页面中span中的内容
resultObj.html(data);
}
到此,整个示例已经完了,也可以将js文件中的代码细化,细化后代码如下
function verify(){
//去出页面中的值
var username = $("#username").val();
//将值发送到服务器,进行验证,并且处理完后回调callback函数,将服务器返回的数据发送到页面显示
$.get("validateUserServlet?username="+username, null, function callback(data){
$("#result").html(data);
});
}
-------------------------------------------------------------------------------
如果不想使用jquery的话,可以自己写ajax应用,来验证用户名
//用户名校验
//这个方法是用XMLHTTPRequert对象进行AJAX的异步交互
var xmlhttp;
function verify(){
//第一步:使用DOM方式获取文本框中的数据
var username = document.getElementById("username").value;
//使用XMLHTTPRequert对象,这个XMLHttpRequest对象是使用中最复杂的一部,要兼容各个浏览器
if(window.XMLHttpRequest){
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,IE5.5,IE5
//将两个可以用户创建XMLHTTPRequest对象的控件名称,保存在一个JS的数组中
//排在前面的版本较新
var activexName = ["MXXML2.XMLHTTP","Microsoft.XMLHTTP"];
//循环创建ActiveXObject
for(var i = 0; i < activexName.length; i++){
try{
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,就抛出异常,然后可以继续循环,继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//第二步:注册回调函数,调用回调函数的时候不能加括号
//我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这就错误的
xmlhttp.onreadystatechange = callback;
//第三步:设置连接信息
//第1个参数是表示http请求方式,支持所有http请求方式,主要是get和post
//第2个参数表是url地址,get方式请求的参数也在url中
//第3个参数表示采用异步还是同步方式交互,true表示异步
xmlhttp.open("GET", "validateUserServlet?username="+username, true);
//第四步,发送数据,开始和服务器端进行交互
//如果是同步的话,当代码运行到shend()的时候就会停住,直到服务器端的数据完全返回才运行
//如果是异步的话,shend会立即完成执行
xmlhttp.send(null);
}
//回调函数
function callback(){
//第五步,判断对象的状态是交互完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功
if(xmlhttp.status == 200){
//获取服务器端返回的数据
//以存文本的方式获取
var responseText = xmlhttp.responseText;
//将数据显示在页面上
document.getElementById("result").innerHTML = responseText;
}
}
}
分享到:
相关推荐
Java登录程序实例:用户名密码验证示例,好像没有使用网络哦,用户名密码暂存在代码中,通过按钮事件激活函数,进行判断。部分代码如下: username=new JTextField(16);//初始化文本输入框,宽度为16列 password=...
ajax技术示例,一个通俗易懂的例子,大家可以参考学习一下
现在有个需求就是异步验证用户名是否存在。用的技术是jQuery异步验证和struts2(其实springMVC也是一样的道理,都只是一个控制器). 表单: 代码如下: <input class=”width150″ maxlength=”32″ type=”text”...
主要介绍了java用户名密码验证示例代码,需要的朋友可以参考下
主要介绍了PHP登录验证功能,结合实例形式分析了php登陆验证相关的用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等相关操作技巧,需要的朋友可以参考下
主要介绍了jquery验证用户名是否重复,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
简单的AJAX示例。验证用户名,判断用户名是否存在。包括jsp页面,web配置,servlet以及servlet.jar.
主要为大家详细介绍了BootstrapValidator验证用户名已存在,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
‘函数:IsValidUserName(byVal UserName) ‘参数:UserName,用户名称 ‘作者:阿里西西 ‘日期:2007/7/15 ‘描述:验证用户名是否包含有非法字符,不含非法字符返回:true ‘示例:IsValidUserName(byVal ...
一个React + Redux / Django Rest Framework身份验证示例 功能性: 用JWT登录 用于JWT的中间件如果到期将刷新 登记 用户登录/注销时的动态导航栏切换 密码变更 屏幕尺寸响应组件和导航栏 如何使用: 克隆仓库...
也是从论坛上找的相关DWR知识,自己写了一个异步验证用户名密码的程序。 包括建库脚本。 基于SSH的配合DWR实现的AJAX验证用户名密码程序,里面还包含一些JS验证邮箱电话等等的脚本。希望对你有帮助
后来有了Ajax,有了异步交互,当用户输完用户名继续填写其他信息的时候,Ajax就将信息发到了服务器去检查该用户名是否已经被注册了,这样如果用户名已经存在,不用等用户将所有数据都提交就可以给出提示。...
注意,在实际开发中,你需要更复杂的逻辑和安全性来验证用户名和密码,并处理数据持久化。此示例仅用于演示目的。 当然,让我们继续完善这个示例。 添加用户验证 我们可以在RegisterServlet中添加更多的验证,例如...
解决大家各平台账户遭到恶意攻击的问题,一般在相关的服务平台登陆中除了用正常用户名和密码外,需要再输入一次谷歌认证器生成的动态口令才能验证成功,相当于输入二次密码,以达到账户的高安全性。 源码使用php实现...
以用户注册页面示例,在注册页面中需要对用户名和两次输入的密码进行验证,其中用户名是唯一的,不能重复,而两次输入的密码必须相同,只用这样的输入才是有效地。并且要求,用户名的格式是:字母开头,后跟字母或...
本文实例讲述了ThinkPHP框架结合Ajax实现用户名校验功能。分享给大家供大家参考,具体如下: 在模板文件中通过ajax获取到用户名,然后在控制器中将用户名与数据库比较,返回校验结果给模板文件。 模板文件路径shop/...
后台将openid作为用户名,若存在则去校验用户信息,否则以此用户名创建新用户,密码随机生成 将校验结果或者创建信息返回给微信小程序端 根据返回的信息完成用户登录校验 django的用户权限认证
1. token的使用场景 无状态请求 保持用户的登录状态 第三方登录(token+auth2.0) 2. 基于token的验证原理 ...服务器:收到请求,验证用户名和密码,验证成功后,分发一个Token返回给客户端 客户端:将T