使用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
}
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 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_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("用户名只能英文字母或数字结尾");
}
}
}
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 java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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;
*
*/
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+"不存在,可以使用");
}
}
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 {
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>
<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>
<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