使用jquery实现用户名验证

我们经常在网上注册的时候，当输入错误的用户名的时候，右边会自动出现相应的警告信息，那么今天我们就介绍一下如何使用jquery实现上述功能！我们先看一下截图（此截图摘自网易）
图一
图二
图三
图四
我们可以通过看网易的源码，看出网易也是依靠jquery来实现上述功能的。我们现在先把最简化的代码给大家分享（此代码不注重页面的设计美观，就完成最基础功能），后面如果有时间，我会逐步再把优化后的代码给大家分享！
第一：注册页面代码
 
<%@ page language="java" contentType="text/html; charset=GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/function.js"></script>
<title>测试用户名表单输入</title>
</head>
<body>
<input type="hidden" name="tmp" id="tmp" value="" />
<table>
<!--用户名的处理 Start-->
    <tr>
       <td>用户名：<input type="text" id="username"></td>
       <td><input type="button" value="检测" onclick="verify()"></td>
       <td>
        <!--正常提示 Start-->
              <!-- class属性用于连接css  -->
                <div id="div_uname_rule" class="name-pop">
                         ¡¤6~18个字符，包括字母、数字、下划线<br>
                         ¡¤字母开头，字母和数字结尾，不区分大小写<br>
                </div>
          <!--正常提示 End-->
          <!--错误提示 Start-->
                 <div id="div_uname_err_info" class="name-pop"></div>  
          <!--错误提示 End-->
          </td>
    </tr>
<!--用户名的处理 End-->
    <tr>
       <td>密码 ：<input type="text" id="password"></td>
    </tr>
</table>
</body>

第二：css代码(如果大家想设计的漂亮一些，需要在此多下些功夫，我只简单的设计了一个)
div.name-pop{
 background-color:#EDEDEB;
 position:absolute;
 height:auto;
 left:310px;
 top:14px;
 width:320px;
 border: 1px red solid;
 display:none;
 padding-left:5px;
 padding-top:5px;
 padding-bottom: 5px;
 padding-right: 5px
}
第三：function.js代码
function chkUsername() {
 var username = $.trim($("#username").val());
 if(username=="") {
  return 0;
 }
 else if( /^\d.*$/.test( username ) ){
  //用户名不能以数字开头
  return -1;
 }
 else if(username.length<6 || username.length>18 ){
  //合法长度为6-18个字符
  return -2;
 }
  else if(! /^\w+$/.test( username ) ){
  //用户名只能包含_,英文字母，数字
   return -3;
 }
 else if(! /^([a-z]|[A-Z])[0-9a-zA-Z_]+$/.test( username ) ){
  //用户名只能英文字母开头
  return -4;
 }
 else if(!(/[0-9a-zA-Z]+$/.test( username ))){
  //用户名只能英文字母或数字结尾
  return -5;
 }
  return 1;
} 
$(document).ready(function(){
  /** ----------- 用户名输入框事件 ----------- */
  //当文本框成为焦点时
  $("#username").bind("focus", function(){
  var ret=chkUsername();
  if(ret==0){
  //用户名输入框为空,显示规则
   $("#div_uname_err_info").hide();
   $("#div_uname_rule").show();  
  }
  return false;
  }); 
  
  //当文本框失去焦点时
  $("#username").bind("blur", function(){
var ret=chkUsername();
   $("#div_uname_rule").hide();
   $("#div_uname_err_info").show();
   if (ret>0){
    var url="testServlet?name="+$("#username").val();
    $.get(url,null,callback);
   }
   else if(ret==0){
   //用户名输入框为空,显示规则
    $("#div_uname_err_info").html("用户名不能为空");  
   } 
  else {
   
    if(ret == -1){
     //显示具体的错误内容
     $("#div_uname_err_info").html("用户名不能以数字开头");
    }
    else if(ret == -2){
$("#div_uname_err_info").html("合法长度为6-18个字符");
    }
    else if(ret == -3){
     $("#div_uname_err_info").html("用户名只能包含_,英文字母,数字 ");
    }
    else if(ret == -4){
     $("#div_uname_err_info").html("用户名只能英文字母开头");
    }
    else if(ret == -5){
     $("#div_uname_err_info").html("用户名只能英文字母或数字结尾");
    }
  }

   return false;
  }); 
});
  function verify(){
   var ret=chkUsername();
   if (ret>0){
   var url="testServlet?name="+$("#username").val();
   $.get(url,null,callback);    //将文本框 中的数据发送到页面上
   }
  }
  //接收服务器返回的数值，将服务器返回的数据动态的显示在页面上
  function callback(data){
   var resultObj=$("#div_uname_err_info");
   resultObj.html(data);
  }
  
第四：编写servlet，我简写了，只做测试用
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class testServlet extends HttpServlet {
/**
  * 
  */
 private static final long serialVersionUID = -416104398788674508L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=GBK");
  String name=request.getParameter("name");
  PrintWriter out=response.getWriter();
  if (name.equals("hanmei")){
   out.println("用户名"+name+"已存在");
  }else{
   out.println("用户名"+name+"不存在，可以使用");
  }
 
 }
public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
doGet(request,response);
 }

}
第五：修改web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
 xmlns="http://java.sun.com/xml/ns/j2ee" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>testServlet</servlet-name>
    <servlet-class>testServlet</servlet-class>
  </servlet>
<servlet-mapping>
    <servlet-name>testServlet</servlet-name>
    <url-pattern>/testServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
备注：别忘了下载jquery文件拷贝到相应的路径下
通过以上步骤，就可以实现用户验证了

本文出自 “快乐分享” 博客，请务必保留此出处http://hanmei.blog.51cto.com/521325/203139

[转载]使用jquery实现用户名验证相关推荐

  1. jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证

    jQuery表单验证实例 / 包含用户名.密码.住址.邮箱验证 如下图 别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type="text/ ...

  2. 一款比较实用齐全的jQuery 表单验证插件

    一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...

  3. 轻量级的jQuery表单验证插件 - HAPPY.js

    为什么80%的码农都做不了架构师?>>>    日期:2012-9-14  来源:GBin1.com 在线演示  本地下载 功能强大的表单验证插件很多,以前我们介绍过validati ...

  4. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 1 &l ...

  5. jQuery 表单验证插件，jQuery Validation Engine用法详解

    jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...

  6. jQuery 表单验证设置html(,jquery表单验证

    如何用jquery进行表单验证 (1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载 (2)引入js (3)按照插 ...

  7. jQuery 表单验证设置html(,jquery表单验证.html

    jquery表单验证 .myform { width: 600px; margin: 50px auto 0; } .p { border: 1px #cecece solid; width: 480 ...

  8. jQuery Validate密码验证的基本使用

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  9. jquery表单验证小结

    jquery表单验证小结 下面将讲述的是一个完整的jquery表单验证实例,该实例覆盖了jquery验证的大部分知识点,比如验证框架,messages的扩展和自定义方法的定义以及在验证中的应用等,接下 ...

  10. jQuery Validate自定义验证

    jQuery Validate 导入js库,这里是mvc中Scripts.Render的用法 @Scripts.Render("~/bundles/jquery")@Scripts ...

最新文章

  1. 常用的CSS属性的英文单词总结及用法、解释
  2. 卓越性能代码_「Win」被隐藏起来的卓越性能模式，为何不想让人发现？
  3. 实现连麦_微信年底放了个大招，视频号重磅升级，打赏直播连麦美颜抽奖齐上...
  4. js模板引擎art template数组渲染的方法
  5. mysql+after+commit_P8级面试难题，after_sync vs after_commit，哪个性能更好？
  6. .NET应用程序与数据库交互的若干问题
  7. HG8240电信光猫禁用TR069之修改配置法
  8. 自动化查询及增加配置参数功能
  9. 计算机对log取反函数,ln计算(log计算器在线)
  10. 发现了一款神仙软件，AI翻译、拍图识字等超多工具免费用
  11. NoClassDefFoundError:org.ksoap2.seri...
  12. 【排序算法】Java版十大经典排序算法实现以及测试结果
  13. 机器人辅助符文天赋符文天赋_机器人符文天赋
  14. linux控制wifi发射功率,路由器的发射功率上限是多少
  15. 全球与中国一体化VR摄影机市场现状及未来发展趋势2022-2028
  16. 基于springboot+vue的水果销售系统附代码
  17. IDEA创建java项目src下没有办法创建包文件/MAVEN模块名变灰且模块多道横杠
  18. HQL语句的基本语法和使用
  19. 新款趣味测试小程序源码_测试可用
  20. openssl 的安装

热门文章

  1. 修改群晖mac 及 sn
  2. linux密码忘记重新设置密码
  3. suse linux 忘记root密码,SUSE linux 忘记root密码
  4. Ubuntu批量转换图片格式
  5. axure 8 表格合并_Excel表格制作出库过磅单，详细步骤讲解，一起来制作吧
  6. oracle instant client 配置,oracle instantclient配置
  7. 机器人学导论复习笔记
  8. 统计分析干货 | 秩和检验及其两两比较的思路与解析
  9. 格兰因果模型可以分析哪些东西_计量 | 使用向量自回归模型(VAR)的操作要点，必备！...
  10. 博文视点“阿里云全系列技术图书”隆重亮相2021云栖大会