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

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

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

效果

JQuery实现异步验证用户名是否存在_第1张图片


采用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+"/";
%>

<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" >密   码: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="注册">
                                                             
                                                    <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;iif(users[i].equals(loginName)){
                flag = true;//存在返回真,并结束
                break;
            }

        }
        if(true == flag){  
            response.getWriter().write("true");//此值jquery可以接收到    
        }else{
            response.getWriter().write("false");
        }
    }  



}

配置Servlet


<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>CheckUserNamedisplay-name>
    <servlet-name>CheckUserNameservlet-name>
    <servlet-class>com.hk.servlet.CheckUserNameservlet-class>
  servlet>
  <servlet-mapping>
    <servlet-name>CheckUserNameservlet-name>
    <url-pattern>/CheckUserNameurl-pattern>
  servlet-mapping>
web-app>

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

你可能感兴趣的:(jquer)