JQuery实现异步验证用户名是否存在

来源：互联网发布：炉石主播知乎编辑：程序博客网时间：2024/05/17 05:55

用户在注册时，最好在用户填写完用户名时就感知用户名是否合法。

实现的方法有多种，js、ajax等等，这里采用jquery封装的ajax实现

效果

采用jsp+servlet的模式实现案例

使用的是jquery-1.7.2.min.js

jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>异步请求测试</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link href="Style/Style.css" rel="stylesheet" type="text/css" /><script src="js/jquery-1.7.2.min.js" type="text/javascript"></script></head><script language="JavaScript">//异步验证用户名是否存在function validatorloginName(){    var loginName=document.getElementById("loginName").value;    if(loginName == ""){       alert("用户名不能为空!");       return;       }   $.ajax({       type: "POST",      //请求方式        url: "CheckUserName",//验证的Servlet路径             data: "loginName="+loginName,   //参数        success: function(data){  //返回值       if(data=="false"){           $('#nameLabe').text("用户名通过验证").css("color","green").css("font-size","10px");       }else{//不存在就显示labe，并用css样式修饰一下           $('#nameLabe').text("用户名已存在").css("color","red").css("font-size","10px");           }          }              });}</script><body>    <center>        <br>        <br>        <br>        <br>        <br>        <table width="684" border="0" cellspacing="0" cellpadding="0">            <tr>                <td height="292" align="center" valign="top"                    background="Images/LoginBg.jpg">                    <table width="350" height="201" border="0" cellpadding="0"                        cellspacing="0">                        <tr>                            <td height="72" align="center"><h3>异步验证用户名是否存在</h3></td>                        </tr>                        <tr>                            <td align="center" valign="top">                                <form>                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">                                        <tr>                                            <td height="30" colspan="2" align="center" class="STYLE2"><span                                                style="color: red;">                                            </span></td>                                        </tr>                                        <tr>                                            <td width="37%" height="30" align="right" >用户名：</td>                                            <td width="300" align="left"><input type="text"                                                name="Username" id="loginName" placeholder="请输入用户名"                                                onblur="validatorloginName()" />                                                <!-- 用来显示验证结果 -->                                                <label id="nameLabe"></label>                                                </td>                                        </tr>                                        <tr>                                            <td height="30" align="right" >密&nbsp&nbsp&nbsp码：</td>                                            <td align="left"><input type="password" name="Password"                                                id="Password" placeholder="请输入密码" class="text1" /></td>                                        </tr>                                        <tr>                                            <td height="30" colspan="2" align="center"><label>                                                    <input type="submit" name="button" id="button" value="注册">                                                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp                                                    <input type="reset" name="button" id="button" value="重置">                                            </label></td>                                        </tr>                                    </table>                                </form>                            </td>                        </tr>                    </table>                </td>            </tr>        </table>    </center></body></html>

Servlet

package com.hk.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CheckUserName extends HttpServlet {    private static final long serialVersionUID = 1L;    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        this.doPost(request, response);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setContentType("text/html");          //假设已经存在三个用户       String[] users = {"zhangsan","lisi","wangwu"};        boolean flag = false;          String loginName=request.getParameter("loginName").toString();        for(int i= 0;i<users.length;i++ ){            if(users[i].equals(loginName)){                flag = true;//存在返回真，并结束                break;            }        }        if(true == flag){              response.getWriter().write("true");//此值jquery可以接收到            }else{            response.getWriter().write("false");        }    }  }

配置Servlet

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">  <servlet>    <description></description>    <display-name>CheckUserName</display-name>    <servlet-name>CheckUserName</servlet-name>    <servlet-class>com.hk.servlet.CheckUserName</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>CheckUserName</servlet-name>    <url-pattern>/CheckUserName</url-pattern>  </servlet-mapping></web-app>

完成的比较粗糙，大家继续完善

阅读全文

1 0