通过Ajax结合validator动态验证表单

 

通过自定义校验规则，可以实现动态查询用户名是否存在。

注意此时需要关闭异步，否则json在没有读取到flag 时 其原始值已经返回。

<script type="text/javascript">
    
    //自定义校验规则
    $.validator.addMethod(
        //规则的名称
        "checkUsername",//校验的函数
        function(value,element,params){
            
            //定义一个标志
            var flag = false;
            
            //value:输入的内容
            //element:被校验的元素对象
            //params：规则对应的参数值
            //目的：对输入的username进行ajax校验
            $.ajax({
                "async":false,"url":"${pageContext.request.contextpath}/checkUsername","data":{"username":value},"type":"POST","dataType":"json","success":function(data){
                    flag = data.isExist;
                }
            });
            
            
            //返回false代表该校验器不通过
            return !flag;
        }
        
    );


    $(function(){
        $("#myform").validate({
            rules:{
                "username":{
                    "required":true,"checkUsername":true
                },"password":{
                    "required":true,"rangelength":[6,12]
                },"repassword":{
                    "required":true,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":"邮箱格式不正确"
                }
            }
        });
    });

</script>