jQuery Validate

引入js文件

<script   src = "http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js" ></script>

<script   src = "http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js" ></script>

实例：

<label for="roleName" class="col-md-2 control-label">角色名</label>

 <div class="col-md-5">

<input type="text" class="form-control" id="roleName"

 name="roleName" value="" οnblur="checkIsExist(this)"

 οnfοcus="clearCss();">

</div>

 <div class="col-md-5">

 <div class="errorTip"></div>

  </div>

<label for="roleKey" class="col-md-2 control-label">roleKey</label>

<div class="col-md-5">

 <input type="text" class="form-control" id="roleKey" name="roleKey"

value="" οnblur="checkIsExist(this)" οnfοcus="clearCss();">

</div>

<div class="col-md-5">

<div class="errorTip"></div>

 </div>

js代码：

$(".form").eq(i).validate({

            onsubmit:true,

            onkeyup: false,

            onfocusout: function(element){$(element).valid()},

            rules: {

                 roleName: "required",

                  roleKey: "required"

            },

            messages: {

                roleName: "请输入角色名称",

                roleKey: "请输入角色key"

             },

             errorPlacement: function(error, element){

                    var errortext = $(error).text();

                    var errorcontainer = $(element).closest(".form-group");

                    errorcontainer.find('.errorTip').html(errortext);

                    isCanSubmit=false;

                    

                },

                success: function(error, element){

                    var errorcontainer = $(element).closest(".form-group");

                    errorcontainer.find('.errorTip').html("");

                    isCanSubmit=true;

                }

        });     

默认的验校规则

1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10

验证的触发方式修改：

onsubmit	Boolean	提交时验证。设置为 false 就用其他方法去验证。	true
onfocusout	Boolean	失去焦点时验证（不包括复选框/单选按钮）。	true
onkeyup	Boolean	在 keyup 时验证。	true
onclick	Boolean	在点击复选框和单选按钮时验证。	true
focusInvalid	Boolean	提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。	true
focusCleanup	Boolean	如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。	false

更改默认的提交方式

$ (). ready ( function ()   {  

 $ ( "#signupForm" ). validate ({

submitHandler : function ( form ) {  

 alert ( "提交事件!" );  form . submit ();

} });

});

$ ( ".selector" ). validate ({  

 submitHandler :   function ( form ) {  

 $ ( form ). ajaxSubmit ();

} })