0%

jquery-validate表单验证

发表于 分类于

文章字数：515,阅读全文大约需要2分钟

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

使用内置验证规则

  1. 为表单添加表单验证

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

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

    1
    2
    3
    4
    <!-- 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>

  2. 添加规则

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

3.ajax前验证

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
$().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. 添加规则
    1
    2
    3
    4
    5
    jQuery.validator.addMethod("validName", function(value, element){
        var obValue=value;//对象的值
        var ob=element;//需要处理的对象
        return true;
    }, "提示信息");

2.为表单元素添加规则

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

3.传参

1
2
3
4
5
6
7
8
9
10
$.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");
1
2
3
username:{
   af:["a","f"]
}

其它方式提交表单

1
2
3
4
5
6
$(".selector").validate({     
submitHandler: function(form) 
  {      
     $(form).ajaxSubmit();     
  }  
})

其他功能

  1. 只验证不提交

    1
    2
    3
    4
    5
    6
    $().ready(function() {
    //只验证不提交
     $("#signupForm").validate({
            debug:true
        });
    });

  2. 默认参数

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

  3. 错误显示位置

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

  4. 远程校验

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