jquery validate基本

http://www.runoob.com/jquery/jquery-plugin-validate.html

 

jquery validate 默认 在键盘按下并释放及提交后验证提交表单

例如:

 

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      }
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      }
    })
});

 

用其他方式替代默认的 SUBMIT

 

$().ready(function() {
 $("#signupForm").validate({
        rules: {
          firstname: "required",
          lastname: "required",
          username: {
            required: true,
            minlength: 2
          }
        },
        messages: {
          firstname: "请输入您的名字",
          lastname: "请输入您的姓氏",
          username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个字母组成"
          },
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

 

使用 ajax 方式

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

 

 

submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。
$(".selector").validate({
  submitHandler:function(form) {
    $(form).ajaxSubmit();
  }
})

 

 

更改错误信息显示的位置
errorPlacement:Callback
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement: function(error, element) {
  error.appendTo(element.parent());
}

 

 

 

validate ()的可选项

debug:进行调试模式(表单不提交)。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。

$(".selector").validate({
    submitHandler:function(form) {
        $(form).ajaxSubmit();
    }
})

OnSubmit:类型 Boolean,默认 true,指定是否提交时验证。

$(".selector").validate({  
    onsubmit:false
})

onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。

$(".selector").validate({   
    onfocusout:false
})

onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。

$(".selector").validate({
   onkeyup:false
})

onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。

$(".selector").validate({
   onclick:false
})

focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。

$(".selector").validate({
   focusInvalid:false
})

focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)。

$(".selector").validate({
   focusCleanup:true
})

 

posted @ 2017-11-20 15:19  wdmiye  阅读(213)  评论(-1编辑  收藏  举报