jquery-validate表单验证

jquery.validate.min.js 是一款基于jq的表单验证工具。找到的教程大部分都是同步提交下的使用,以下是我找到的ajax提交方式下的使用。

使用内置验证规则

  1. 为表单添加表单验证
$("#cForm").validate();

表单验证错误信息输出位置自定义


用户名:
  1. 添加规则
$("#cForm input[name='name']").rules("add",{required: true}) //规则的意思是必填

3.ajax前验证

if($("#categoryForm").valid()){//验证并返回结果
    //ajax...
}

规则和验证信息自定义可以自己百度,信息不写会有默认规则。

附较为详细的规则及自定义提示信息

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});

自定义验证规则

其他操作参考上面

  1. 添加规则
jQuery.validator.addMethod("validName", function(value, element){
    var obValue=value;//对象的值
    var ob=element;//需要处理的对象
    return true;
}, "提示信息");

2.为表单元素添加规则

$("#nameInput").rules("add",{
      validName:true; //规则名:期望值(未达到期望值提示自定义的错误信息)
});

3.传参

$.validator.addMethod("af",function(value,element,params){  
    if(value.length>1){
        return false;
    }
    if(value>=params[0] && value<=params[1]){
        return true;
    }else{
        return false;
    }
},"必须是一个字母,且a-f");
username:{
   af:["a","f"]
}

其它方式提交表单

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

其他功能

  1. 只验证不提交
$().ready(function() {
//只验证不提交
 $("#signupForm").validate({
        debug:true
    });
});
  1. 默认参数
//设置默认参数,使用其它方式提交
$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});
  1. 错误显示位置
//默认是追加到元素后面
errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}
  1. 远程校验
remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

你可能感兴趣的:(jquery-validate表单验证)