`

jquery表单校验

阅读更多
$(document).ready(function(){
         $("#demoForm").validate({

             rules:{
               username:{   //name 指的是name值不是ID
                  required:true,
                  minlength:2,
                  maxlength:10,
                  rangelength:[2,10]  //长度范围,这样就不用最大、最小了

               },
              password:{ 
                  required:true
              }
             },
             message:{
                username:{
                   required:"必填项",
                   rangelength:"用户名在2-10之内"
                },
                password:{
                   required:"必填项"
                }

             }
         });
});

基本API:
method:校验的方法
rule   : 规则
在validate 方法中 加上 debug:true   //在校验成功后,是不会进行提交操作的
基本的验证方法:
  remote :远程校验
  在rule规则中使用
  min  :表示的值  (最小数、最大数、数字范围)  minlength :长度
email:邮箱格式  URL :URL格式
  $("#demoFrom").validate({
     rules:{
         username:{
            remote:{
                url:"",
                method:"POST",
                date:{
                     loginTime:function(){
                                  return +new date(); //另外多加一个参数
                               }
                }
            }
         }
     },
     message:{
          username:{
               remote:"用户名错误"  //remote 信息提示 
          }
          
     }
  });


[b]
validate : 进阶功能
[/b]
valid()
 检查表单是否正确     $("#demoFrom").valid()
rule()  方法,  获取的是节点的规则

[b]
validate 静态方法
[/b]
validate配置项
submitHandler:function(form){   //通过验证后运行的
    
},
invalidHandler:function(event,validator){  //验证不通过后触发的方法,无效表单提交后运行的函数

                             
}[b][/b]
//追加错误信息的位置
$("#demoFrom").validate({

   groups:{
      login:"username password";  
   },
   errorPlacement:function(error,element){
       error.insertBefore("#info");   //info 要追加的位置的节点
   }
});
配置项  : onsubmit  :是否在提交时进行验证,默认是true
           onfocusout:是否在获取焦点的时候进行验证
           onkeyup   : 是否在敲击键盘的时候进行验证
           onclick : 是否在鼠标点击的时候进行验证   一般用于checkbox或者radio
           errorClass  : 错误提示的css样式,可以自定义
           validClass:  指定验证通过的css样式
           errorElement   使用什么标签标记错误
           wrapper :使用什么标签把上面的标签包装起来
           errorLabelContainer:把错误信息统一放在一个容器里面
           errorContainer:显示或者隐藏验证信息可以自动实现有错误时,出现把容器标记为显示,没错误时标记为隐藏
validate 自带的选择器
:blank    选择值为空 的元素  即取消空格后的值的长度是否等于零
:filled   选择所有值不为空的元素   与上面正好相反
:unchecked   所有的没有被选中的元素


validate自定义的验证方法
 jQuery.validator.addMethod(name,method,[,message])
name: 方法名
method 方法体  function(value, element,params){}
message :提示信息 可选

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics