jQuery基于ajax方式实现用户名存在性检查功能示例

本文实例讲述了jQuery基于ajax方式实现用户名存在性检查功能。分享给大家供大家参考,具体如下:

对于拥有会员功能的网站,尤其是会员登录后可以留言或评论的网站,一般要求不能有两个或两个以上相同的用户名存在。因此,在用户注册的时就需要对用户名是否已经被注册进行检查防止出现相同的用户名。下面是我实现这种功能的一种解决方案。

1、方案原理:利用ajax的异步请求不刷新正在注册的页面向后端发送请求,后端对请求数据进行处理返回用户名是否已经存在的结果。

2、方案详情

(1)html代码部分,运用了input标签的onblur事件调用相应的js函数。

<div class="pull-left">
  <input id="username" name="username" type="text" class="form-control isUsername" onblur = "CheckUserName()">
</div>

(2)Jquery部分,采用了ajax技术

function CheckUserName()
{
  var userName = $("#username").val();
  var Option =
  {
    url: encodeURI('/Handler/AuthAccounts.ashx?action=checkusername&userName='+userName),
    type: "get",
    dataType: 'text',
    cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息。
    async: true, //(默认: true),所有请求均为异步请求。发送同步请求,请将此选项设置为 false。同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
    timeout: 150000, //设置请求超时时间(毫秒)。此设置将覆盖全局设置。
    error: function ()
    {
    },
    success: function (data, textStatus)
    {
      if (data == null || data == undefined)
      {
        return false;
      }
      jsondata = eval('(' + data + ')');
      if (jsondata.state == "success")
      {
        alert(jsondata.message);
        return false;
      }
    },
    beforeSend: function () //检查之前,是否通过格式验证
    {
      var text = $("#username-error").text();
      if (text != ""&&text!=undefined&&text!=null)
      {
        return false;
      }
    }
  };
  jQuery.ajax(Option);
  return false;
}

(3)后端一般应用处理程序

/// <summary>
/// 检查用户名是否已经存在
/// </summary>
/// <param name="context"></param>
protected void CheckUserName(string userName)
{
   CommonStruct commonStruct = new CommonStruct();
   if (userName != "" && userName!=string.Empty)
   {
     QingCi.Model.ExecResultData result = QingCi.BLL.AuthAccounts.CheckUserNameExist(userName);
     if (result.State == stateSuccess)
     {
       commonStruct.state = stateSuccess;
       commonStruct.message = result.Message;
      HttpContext.Current.Response.Write(serializer.Serialize(commonStruct));
      HttpContext.Current.Response.End();
     }
   }
}

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

时间: 2017-02-07

利用jQuery.Validate异步验证用户名是否存在(推荐)

HTML头部引用: <script type="text/JavaScript" src="../js/jQuery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> <script type="text/javas

jQuery异步验证用户名是否存在示例代码

现在有个需求就是异步验证用户名是否存在.用的技术是jQuery异步验证和struts2(其实springMVC也是一样的道理,都只是一个控制器). 表单: 复制代码 代码如下: <input class="width150" maxlength="32" type="text" id="dept_name" name="dept.dept_name" value="${dept.dept_n

基于jQuery实现的Ajax 验证用户名是否存在的实现代码

实例: 1.请求页面AJax.aspx HTML代码 复制代码 代码如下: <div> <input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> <div id="show

基于jQuery实现Ajax验证用户名是否存在实例

本文章向大家分享基于jQuery实现的Ajax 验证用户名是否存在的实现代码,需要的码农朋友可以参考一下本文的源代码. jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详

JQuery用户名校验的具体实现

本实例为大家分享了JQuery用户名校验功能,分享给大家供大家参考,具体内容如下 $(document).ready(function(){}):定义页面装载完成时,需要执行的方法. $()获得页面指定的节点,参数是某种CSS的选择器.返回的是一个JQuery对象,可在其上执行JQuery方法. val()方法可以获得节点的value属性值 html()设定某个节点中的html内容 click()相应鼠标点击事件 keyup()相应键盘弹起事件 $.get()可以和服务器进行get方式的交互,注

jquery easyUI中ajax异步校验用户名

以前无聊写过一个小东西,其中有一个功能就是添加用户,当时并没有考虑用户名重复的问题,今日闲来无事,打算利用ajax的异步刷新来校验用户名是否存在.自己也是新手,刚刚大三,哈哈写的不对的地方请指出. 放上效果图: 首先是编写前的准备 我并不是用原生的js来写的ajax而是用的jqueryeasyUI框架中的ajax,所以在使用之前就必须要引入jquery的js文件. <link rel="stylesheet" type="text/css" href=&quo

jquery ajax 检测用户注册时用户名是否存在

首先需要一个添加年级的页面,暂时叫grade.htm 这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件). 下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的. grade.htm 复制代码 代码如下: <input type="text" size="6" name="NAME" id="NAME"/><

jQuery+Ajax实现用户名重名实时检测

利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现.这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输. register.jsp 注册显示页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM

jQuery Ajax 实现在html页面实时显示用户登录状态

当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了 代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi

PHP+AJAX实现无刷新注册(带用户名实时检测)

很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是"您的用户名已被使用"或XXXXXXX不合法,我想大家的心情一定特别不爽,今天就介绍个AJAX实现页面不刷新注册+实时检测用户信息的简单注册程序,希望对大家有所帮助.好的,先看注册界面代码: <table width="831" border="0" align="

Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)

其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal

JQuery Ajax如何实现注册检测用户名

Ajax(无需等待直接向服务器发起请求) (Asynchronous Javascript And Xml) :异步的 Google创新的一种js技术 方法一:比较原始没有封装的方法: //核对用户名是否可用 var xmlhttp = null; function checkUser(userName) { if (xmlhttp == null) { xmlhttp = new XMLHttpRequest();//第一步:创建一步通信对象 } //第二步:设定回调函数 xmlhttp.on

基于jQuery实现Ajax验证用户名是否可用实例

本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/jquery_aj

jquery+ajax实现注册实时验证实例详解

本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈! 先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了: 这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如果需要在出错时执行函数,请使用 $.ajax. 复制代码 代码如下: $(selector

jQuery Validate格式验证功能实例代码(包括重名验证)

引入jQuery-1.7.1.js和jquery.validate.js两个js文件 jquery.validate.js下载地址:http://xiazai.jb51.net/201703/yuanma/jquery.validate.rar <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Typ

ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

第一种:传统的ajax异步请求,后台代码以及效果在最下边 首先我们在eclipse中创建一个注册页面regist.jsp,创建一个form表单,注意,由于我们只是实现用户名校验的效果,下边红色部门是我们需要研究对象,所以其他的部门可以忽略不看. 内容如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <