JQuery实例（二）- 表单用户名是否可以验证_$('#messagecontent').(7)('focus',function(){ <!-- -CSDN博客

本文链接：https://blog.csdn.net/yuguiyang1990/article/details/8932162

在表单中验证用户名是否已被注册，使用JQuery实现很简单。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery Demo</title>
		
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/province_city.js"></script>
		<script type="text/javascript" src="js/form.js"></script>
	</head>
	
	<body>
		<center>
			<h3>省市二级联动</h3>
			省份：<select id="sl_province"></select>
			城市：<select id="sl_city"></select>
			
			<h3>表单验证</h3>
			<form action="" method="post">
				用户名:<input type="text" name="name" id="form_name"/><span id="span_message"></span><br/>
				密  码:<input type="password" name="password" /><br/>
				
				<input type="submit" value="注册">
			</form>
		</center>
	</body>
</html>

主要思想是：

1.监听输入框的失去焦点和获取焦点事件

form.js

(function() {
	$().ready(function() {
		
		//监听用户名输入框获取焦点事件
		$("#form_name").focus(function() {
			//清空消息显示框
			$("#span_message").text("");
		});
		
		//监听用户名输入框失去焦点的事件
		$("#form_name").blur(function() {
			var name = $("#form_name").val();
			
			if(name != "") {
				//后台验证
				$.ajax({
					url: 'common!checkName',
					method: 'post',
					dataType: 'json',
					data: 'name=' + name,
					
					success: function(data) {
						//显示消息
						$("#span_message").text(data.message);
						
						if(data.success) {
							//可以使用
							$("#span_message").css("color" , "green");
						} else {
							//不可以使用
							$("#span_message").css("color" , "red");
						}
					}
				});
			}
			
		});
		
	});
})();

package org.ygy.jquery.action;

import java.util.ArrayList;
import java.util.List;

import org.ygy.jquery.vo.ResponseMessageVO;
import org.ygy.jquery.vo.SimpleVO;

import com.opensymphony.xwork2.ActionSupport;

public class JQueryAction extends ActionSupport {
	private static final long serialVersionUID = 6797154008479295854L;
	
	private static final String MSG = "msg";
	private List<SimpleVO> voList;
	private Integer id;
	private ResponseMessageVO message;
	private String name;
	
	
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public ResponseMessageVO getMessage() {
		return message;
	}

	public void setMessage(ResponseMessageVO message) {
		this.message = message;
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}


	public List<SimpleVO> getVoList() {
		return voList;
	}


	public void setVoList(List<SimpleVO> voList) {
		this.voList = voList;
	}


	/**
	 * 获取省份信息
	 * @return
	 */
	public String queryProvince() {
		voList = new ArrayList<SimpleVO>();
		voList.add(new SimpleVO(1 , "山东省"));
		voList.add(new SimpleVO(2 , "辽宁省"));
		voList.add(new SimpleVO(3 , "江苏省"));
		
		return SUCCESS;
	}
	
	/**
	 * 获取城市信息
	 * @return
	 */
	public String queryCity() {
		voList = new ArrayList<SimpleVO>();
		
		switch(id) {
		case 1:
			voList.add(new SimpleVO(10 , "青岛市"));
			voList.add(new SimpleVO(11 , "济南市"));
			voList.add(new SimpleVO(12 , "烟台市"));
			
			break;
		case 2:
			voList.add(new SimpleVO(20 , "丹东市"));
			voList.add(new SimpleVO(21 , "大连市"));
			voList.add(new SimpleVO(22 , "沈阳市"));
			voList.add(new SimpleVO(23 , "鞍山市"));
			
			break;
		case 3:
			voList.add(new SimpleVO(30 , "无锡市"));
			voList.add(new SimpleVO(31 , "常州市"));
			
			break;
		}
		
		return SUCCESS;
	}
	
	/**
	 * 检测用户名是否存在
	 * @return
	 */
	public String checkName() {
		message = new ResponseMessageVO();
		
		if(name.equals("ygy")) {
			message.setSuccess(false);
			message.setMessage("该用户名已被注册!");
		} else {
			message.setSuccess(true);
			message.setMessage("该用户名可以使用!");
		}
		
		return MSG;
	}
}

package org.ygy.jquery.vo;

import java.io.Serializable;

public class ResponseMessageVO implements Serializable {
	private static final long serialVersionUID = -4994111112878268103L;

	private boolean success;
	private String message;

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<constant name="struts.i18n.encoding" value="utf-8"></constant>
	<constant name="struts.multipart.maxSize" value="20971520"/>
    <constant name="struts.devMode" value="true" />
    
	
	<package name="p_province" extends="json-default" namespace="/">
		<action name="common" class="org.ygy.jquery.action.JQueryAction">
			<result name="success" type="json">
				<param name="root">voList</param>
			</result>
			
			<result name="msg" type="json">
				<param name="root">message</param>
			</result>
		</action>
	</package>
</struts>