利用ajax校验表单

最新推荐文章于 2019-06-12 17:50:05 发布

LM_AC

最新推荐文章于 2019-06-12 17:50:05 发布

阅读量345

点赞数

分类专栏：第二阶段项目

本文链接：https://blog.csdn.net/Myair_AC/article/details/78107062

版权

第二阶段项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

如题,校验一个最基本用户名的文本框:
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
    }

}

LM_AC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用ajax校验表单

如题,校验一个最基本用户名的文本框: 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/h
复制链接

扫一扫