validate插件校验表单--自定义校验,Ajax异步校验用户名是否存在

1.所需要的插件下载地址(放到js目录下)

https://pan.baidu.com/s/16KyrX16dzgGTIncho2WHmg

2.引入库

<script src="js/jquery.validate.min.js" type="text/javascript"></script>

3.编写校验文件

<script type="text/javascript">
     
        //自定义校验规则
        $.validator.addMethod(
            //自定义校验规则的名称
            "checkUsername",
            //自定义规则校验的函数    
            function(value,elements,params){
                var flag = false ;
                
                $.ajax({
                    "async":false,       //必须是同步才能校验成功
                    "url":"${pageContext.request.contextPath}/user?method=checkUsername",
                    "data":{"username":value},
                    "type":"POST",
                    "dataType":"json",
                    "success":function(data){
                        flag = data.isExit;
                    }
                });
                
                //返回false代表该校验器不通过
                return !flag ;
            }    
        )

        $(function(){
            $("#myform").validate({
                rules:{
                    "username":{
                        "required":true,
                        "checkUsername":true
                    },
                    "password":{
                        "required":true,
                        "rangelength":[6,12]
                    },
                    "repassword":{
                        "required":true,
                        "rangelength":[6,12],
                        "equalTo":"#password"
                    },
                    "email":{
                        "required":true,
                        "email":true
                    },
                    "sex":{
                        "required":true
                    }
                },
                messages:{
                    "username":{
                        "required":"用户名不能为空哦！",
                            "checkUsername":"用户名已经存在"
                    },
                    "password":{
                        "required":"密码不能为空哦！",
                        "rangelength":"密码长度必须为6-12位哦！"
                    },
                    "repassword":{
                        "required":"密码不能为空哦！",
                        "rangelength":"密码长度必须为6-12位哦！",
                        "equalTo":"两次密码不一致"
                    },
                    "email":{
                        "required":"邮箱不能为空哦！",
                        "email":"邮箱格式不正确"
                    },
                    "sex":{
                        "required":"必须选择性别"
                    }
                }
            });
        });

</script>

4.checkUsername

web层

public void checkUsername(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        //接收数据
        String username = request.getParameter("username");
        
        UserService service = new UserService();
        boolean isExit = service.checkUsername(username);
        
        //将数据写回Ajax
        String json = "{\"isExit\":"+isExit+"}";
        response.getWriter().write(json);

    }

service层

//校验注册时用户名是否已经存在
    public boolean checkUsername(String username) {
        Long isExit = 0l;
        try {
            isExit = dao.checkUsername(username);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return isExit>0?true:false;

    }

dao层

//注册时校验用户名是否已经存在
    public Long checkUsername(String username) throws SQLException {
        QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select count(*) from user where username=?";
        Long query = (Long) qr.query(sql, new ScalarHandler(), username);
        return query;
    }