使用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