案例17-validate自定义校验规则校验验证码是否输入正确

Posted 2020-10-24 jepson6669

1 自定义校验规则代码

<script type="text/javascript">
    //使用validate插件进行表单的校验
    $(function(){
        $("#myform").validate({
            rules:{
                checkCode:{
                    "required":true,
                    "checkVerificationCode":true
                }
                
            },
            messages:{
                checkCode:{
                    "required":"验证码不能为空",
                    "checkVerificationCode":"验证码输入错误"
                }
            }
        });
    });


    //自定义校验规则校验验证码是否正确
    $.validator.addMethod(
        //规则的名称
        "checkVerificationCode",
        //校验的函数
        function(value,element,params){
            
            //定义一个标志
            var isTrueFlag= false;
            
            
            //value:表单输入框中输入的内容
            //element:被校验的元素对象
            //params：规则对应的参数值
            //目的：对输入的checkCode进行ajax校验
            $.ajax({
                "async":false,/*必须要是同步的的方式  */
                "url":"${pageContext.request.contextPath}/checkVC",
                "data":{"checkCode":value},
                "type":"POST",
                "dataType":"json",
                "success":function(data){
                    isTrueFlag = data.isTrue;
                    /* alert(isTrueFlag); */
                }
                
            });
            
            //返回false代表该校验器不通过
            return isTrueFlag;
        }
    
    );
   
</script>

2 servlet代码

package www.test.web.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 CheckVCServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 解决乱码问题
        request.setCharacterEncoding("UTF-8");

        // 判断验证码是否正确
        // 获得页面输入的验证
        String checkCode_client = request.getParameter("checkCode");
        System.out.println(checkCode_client);
        // 获得生成图片的文字的验证码
        String checkCode_session = (String) request.getSession().getAttribute("checkcode_session");
        System.out.println(checkCode_session);
        // 比对页面的和生成图片的文字的验证码是否一致
        boolean isTrue=true;
        if (!checkCode_session.equals(checkCode_client)) {
            isTrue=false;
        }
        String json ="{\"isTrue\":"+isTrue+"}";
        
        response.getWriter().write(json);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

注意：表单校验不通过的时候不会提交。