fieldConfig:可以用来根据字段名称做一些配置,注释中有配举例。可配置的选项说明如下:
– fvTipTarget:用来自定义气泡显示在哪个元素上; – tipPlacement:配置某个元素气泡提示的显示位置 – tooltipClass:自定义气泡组件的css类 – errorPlacement:自定义某个元素的失败信息的插入位置 – fvRelatedTarget:自定义元素校验时需要关联影响的其它元素,其实就是在表单元素校验失败的时候也把相关的validClass和errorClass这两个css类,同步管理到其它元素而已。
需要注意的是,fieldConfig是根据字段元素名称来配置的,因为只能根据名称来找到相应的元素,所以表单元素上面一定要有name属性,这样才能找到fieldConfig中的配置项。
fieldTypeConfig:可以用来按字段类型做一些配置,它的配置项跟fieldConfig的一致,只不过它的好处在于,可以为同一个类型的字段指定相同的配置,省的在fieldConfig里面要重复配置。
需要注意的是:fieldType是通过在表单元素上的type属性或者data-type属性或者data-fv-type属性来指定的,优先级:data-fv-type > data-type > type。在fieldTypeConfig中,可以使用all这个特殊的type,它不需要在表单元素上指定,用来对所有的字段进行一个统一的配置。在validate.js模块的静态成员上,提供了defaultFieldTypeConfig对象,通过扩展这个对象,可以提供默认的一些按字段类型的配置,方便做一些统一处理。最后一点在静态成员部分还会再详细介绍。
jquery.validate相关的一些需要覆盖的option及其说明如下:
debug: true,//防止校验成功后表单自动提交
submitHandler: $.noop,//屏蔽表单校验成功后的表单提交功能,由外部的Form组件负责提交
ignore: '[type="hidden"]:not(.fv-yes),[disabled]:not(.fv-yes),.fv-no',//用于过滤不参与校验的元素
errorElement: 'i',//使用<i>元素来包裹校验失败的信息
errorClass: 'fv-error',//校验失败时相应的class
validClass: 'fv-valid'//校验成功时相应的class需要补充的是:
a. 为啥要防止表单自动提交,因为我自己更偏向于主动控制表单提交;
b. ignore部分,没有完全把隐藏的或者禁用的表单元素排除掉,有一些时候隐藏元素也是能够用于校验的。
3)核心实现
核心实现的方法就是下面的代码:
$element.validate($.extend(opts, {
errorPlacement: function (error, element) {
if (opts.useTooltip) {
return;
}
//jquery.validate组件默认的校验失败信息的插入方式是:在该元素后面插入校验失败的信息
//我们可以按字段及字段类型通过fieldConfig与fieldTypeConfig来自定义插入的方式










