动态校验场景

前端设计避免不了会出现各种信息校验相关操作，而方便，有效，实时的校验提醒业务也是很好的用户体验，jQuery Validate为表单校验工作提供了很好的开发体验，方便，简洁，满足所有的校验正则以及自定义规则。为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法。

项目案例

现提供如下需求的校验：

1. 所有的表单元素都是动态；
2. 校验规则包含在对应的数据中；
3. 单个元素分为大小表单校验；

需求如图

要求

1. 上下限不能同时为空，同时为空出现错误提醒；
2. 上下限同时不为空时比较大小，上限值大于下限值；
3. 允许单个上限或下限为空，且输入值在有效范围之内；
4. 表单元素一般分是初始化加载，一般分数据是复选框添加和删除，需求动态加入校验；

处理方法

初始化数据完成，表单元素动态添加之后，初始化校验 代码片.

var $form = $("#mdf_ammter_form");
var formParam = $.extend(true,{}, PublicConstant.fnValidator($form), {
      rules: {},
      messages: {},
      errorPlacement: function(error, element) {
      	error.appendTo(element.closest('.control-group').find(".controls"));
      },
});
$form.validate(formParam);
$('#'+id+"up").rules("add",{
     required : req,
     min:parseInt(minVal),
     max:parseInt(maxVal),
     number:true,
     messages : {
         min  : "请输入["+minVal+","+maxVal+"]之间的值",
         max  : "请输入["+minVal+","+maxVal+"]之间的值",
         required  : "请至少设置一个上限或下限值",
         number  : "请输入合法的数字",

     }
 });

 $('#'+id+"down").rules("add",{
     required : req,
     min:parseInt(minVal),
     max:parseInt(maxVal),
     number:true,
     messages : {
         min  : "请输入["+minVal+","+maxVal+"]之间的值",
         max  : "请输入["+minVal+","+maxVal+"]之间的值",
         required  : "请至少设置一个上限或下限值",
         number  : "请输入合法的数字",
     }
 });

复选框切换时，动态表单元素添加校验规则 代码片.

$('#'+id+"up").rules("add",{
     required : req,
     min:parseInt(minVal),
     max:parseInt(maxVal),
     number:true,
     messages : {
         min  : "请输入["+minVal+","+maxVal+"]之间的值",
         max  : "请输入["+minVal+","+maxVal+"]之间的值",
         required  : "请至少设置一个上限或下限值",
         number  : "请输入合法的数字",

     }
 });

 $('#'+id+"down").rules("add",{
     required : req,
     min:parseInt(minVal),
     max:parseInt(maxVal),
     number:true,
     messages : {
         min  : "请输入["+minVal+","+maxVal+"]之间的值",
         max  : "请输入["+minVal+","+maxVal+"]之间的值",
         required  : "请至少设置一个上限或下限值",
         number  : "请输入合法的数字",
     }
 });

表单文本元素添加事件监听，并添加新的校验规则 代码片.

var val = $(that).val();
        var name = $(that).attr('name');
        var up=new RegExp('up');
        var down=new RegExp('down');
        var noVal = false;
        if(up.test(name)){
            var downId = name.replace('up','down');
            var maxVal = $("#"+downId).val();
            var minVal =parseInt(val);
            if(val ==''){
                minVal = false;
            }
            if(maxVal ==''){
                maxVal = false;
            }else{
                maxVal = parseInt(maxVal);
            }
            if(maxVal =='' && val ==''){
                noVal = true;
            }
            // $('#'+name).rules('remove','required');
            // $('#'+name).rules("remove",{required:true,});
            $('#'+name).rules("add",{
                max:maxVal,
                required:noVal,
                messages : {
                    max  : "请输入值小于上限值"+maxVal,
                    required:'请至少设置一个上限或下限值'
                }
            });
            // $('#'+downId).rules('remove','required');
            // $('#'+name.replace('up','down')).rules("remove",{required:true,});
            $("#"+downId).rules("add",{
                min:minVal,
                required:noVal,
                messages : {
                    min  : "请输入值大于下限值"+val,
                    required:'请至少设置一个上限或下限值'
                }
            });
        }else if(down.test(name)){
            var upId = name.replace('down','up');
            var minVal = $("#"+upId).val();
            var maxVal =parseInt(val);
            if(val ==''){
                maxVal = false;
            }
            if(minVal ==''){
                minVal = false;
            }else{
                minVal = parseInt(minVal);
            }
            if(minVal =='' && val ==''){
                noVal = true;
            }
            // $('#'+name).rules('remove','required');
            // $('#'+name).rules("remove",{required:true,});
            $('#'+name).rules("add",{
                min:minVal,
                required:noVal,
                messages : {
                    min  : "请输入值大于下限值"+minVal,
                    required:'请至少设置一个上限或下限值'
                }
            });
            // $('#'+upId).rules('remove','required');
            // $('#'+upId).rules("remove",{required:true,});
            $("#"+upId).rules("add",{
                max:maxVal,
                required:noVal,
                messages : {
                    max  : "请输入值小于上限值"+val,
                    required:'请至少设置一个上限或下限值'

                }
            });
        }
        $("#"+form).valid();

具体效果看实际应用场景，部分代码为贴出，仅记录代码逻辑思路。