如题,校验一个最基本用户名的文本框:
jsp:
<%@ 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>Insert title here</title>
<script type="text/javascript" src="js/xhr.js"></script>
<script type="text/javascript">
function check_name(){
var name1 = document.getElementsByName("username")[0];
name1.style.border="1px solid gray";
//使用ajax校验 1.创建XMLHttpRequest对象
var xhr = getXMLHttpRequest();
//2 .打开连接去校验
xhr.open("get","CheckServlet?username="+name1.value);
//3 . 发起请求
xhr.send();
// 4 检测请求状态
xhr.onreadystatechange=function (){
if(xhr.readyState==4){
if(xhr.status==200){
var result = xhr.responseText;
var jsonStr = JSON.parse(result);
var username_error_msg = document.getElementById("username_error_msg");
username_error_msg.innerHTML = jsonStr.message;
username_error_msg.style.color = "red";
}
}
}
}
function getFocus(){
var name1 = document.getElementsByName("username")[0];
name1.style.outline="none";
name1.style.border="1px solid red";
}
</script>
</head>
<body>
<form action="" method="post">
用户名:<input type="text" name="username" onblur="check_name()" onfocus="getFocus()"/><span id="username_error_msg"></span><br>
密码:<input type="password" name="pswd_name"/><span id="pswd_error_msg"></span><br>
<input type="submit" value="提交" >
</form>
</body>
</html>
onblur是失去焦点时触发事件,就是鼠标离开input文本框时触发事件.
onfocus是聚集焦点触发事件,就是鼠标点击input文本框触发事件.
Servlet
package com.lm.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class CheckServlet
*/
public class CheckServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("username");
System.out.println("name :"+name);
String name_error_msg = "";
if("".equals(name)||null==name) {
name_error_msg="用户名不能为空";
}else if(!name.matches("\\w{6,8}")) {
name_error_msg="用户名格式不正确,请输入6-8位的字符";
}
String result = "{\"status\":200,\"message\":\""+name_error_msg+"\"}";
response.getWriter().write(result);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
在webcontent下面建一个js文件夹,在这个文件夹里面建一个xhr.js文件,其中的代码:
function getXMLHttpRequest(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
注意:servlet代码中用到了过滤器,要实现一个过滤器类,不要忘记在web.xml中配置.
package com.lm.servlet;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet Filter implementation class EncodeFilter
*/
public class EncodeFilter implements Filter {
/**
* Default constructor.
*/
public EncodeFilter() {
// TODO Auto-generated constructor stub
}
/**
* @see Filter#destroy()
*/
public void destroy() {
// TODO Auto-generated method stub
}
/**
* @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
*/
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request2 = (HttpServletRequest) request;
HttpServletResponse response2 = (HttpServletResponse) response;
request2.setCharacterEncoding("utf-8");
response2.setContentType("text/html;charset=utf-8");
chain.doFilter(request2, response2);
}
/**
* @see Filter#init(FilterConfig)
*/
public void init(FilterConfig fConfig) throws ServletException {
// TODO Auto-generated method stub
}
}