使用内置验证规则

为表单添加表单验证

$("#cForm").validate();

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

<!-- input是表单的输入框 -->
<div class="inputMain">用户名：<input type="text" name="user" /></div>
<!-- for和input的name绑定 -->
<div style="height:20px;"><label id="user-error" class="error" for="user"></label></div>

添加规则

$("#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: "请选择两个主题"
     }
    })
});

自定义验证规则

其他操作参考上面

添加规则

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();     
   }  
 })

其他功能

只验证不提交

$().ready(function() {
//只验证不提交
 $("#signupForm").validate({
        debug:true
    });
});

默认参数

//设置默认参数，使用其它方式提交
$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

错误显示位置

//默认是追加到元素后面
errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

远程校验

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

最后编辑于：2019.08.12 14:19:50