jQuery 之 validate添加ajax函数

1.使用介绍
（1）jQuery的validate功能:提供格式验证。
（2）使用时需要引入两个jsk库文件：

<script src="../js/login/modernizr-2.6.2.min.js"></script>
<script src="../js/login/jquery.min.js"></script>

自己定义的规则写入自定义的js库中，一并引入：

<script src="../js/login/jquery.validate.js"></script>

（3）使用格式

$().ready(function() {     
    $("#signupForm").validate({
        rules:{ //校验规则
Username：{  //控件name属性值
}
       },
        messages:{ //错误提示信息
Username：{  
}
       },
    });

（4）出错时，默认在校验元素后新增加一label标签，并添加默认属性。

<label id="xxx-error"  for="xxx" style="display: inline-block;"></label>

（5）规则介绍
hightlight：跟一个函数，无默认规则，需自定义样式给未通过验证的元素加效果。函数中的element指向当前校验的元素。

highlight : function(element) { 
                   $(element).addClass('has-error');  
               }

2.自定义规则之添加ajax函数
例如：自定义规则，验证数据库中该用户名是否存在。

$.validator.addMethod("checkUsername",function(value,element,params){ 
        $.ajax({url:"/rz/LoginServlet?method=checkUsername",
            data:{
                Username:$("#susername").val()
                },
                success:function(data){                 
                    if(data == "true") {
                        $("#namehint").empty();
                        document.getElementById("susername-error").innerText="用户名已存在，请重新输入";
                        $("#susername").val("");  
                    }else{                      
                        $("#namehint").empty();
                        $("#susername").removeClass("has-error");
                        }               
                    }
            });

（1）addMethod(name,method,message)方法
name：参数 name 是添加的方法的名字
method：参数 method 是一个函数，接收三个参数 (value,element,param) 。value 是元素的值，element 是元素本身，param 是参数。
message：参数message是自定义的错误提示
（2）使用ajax校验时，使用alert后存在多次请求问题，尽量别使用alert提示信息。
（3）使用ajax时，需要将返回的数据添加到提示标签中，可通过出错提示标签的id属性，添加到默认的出错标签中。
（4）使用append函数，将新创建元素当子元素添加在被追加元素中。如果是input标签使用append函数，不会显示提示信息内容，但通过控制台，可查看到添加成功后的排布为：

<input id="myhint"><span>添加成功</span></input>

jQuery 之 validate添加ajax函数

猜你喜欢