bootstrapValidator插件对动态添加的表单元素进行前台校验

内容目录

一、前言

    
实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验。在以前的工作中也使用过
bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现。虽然思路
很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家
有所帮助。

思路:动态添加表单元素,并调用bootstrapValidator的方法为表单添加校验规则,调用addField()方法实现功能

在网上找了好久才找到相关方法 ,可以去看下:http://formvalidation.io/api/#add-field,这里直接给出相关内容的截图,说实话我是没看太明白。。。后来又浪费好多时间去试验怎么使用。

在绝望之际偶然看到有这种用法,就试验了下,果然成功了

二、功能图

此图是页面初始化时的效果,表单元素是固定的,并且校验也是加在ready方法中的,稍后贴代码

下图是点击添加按钮,动态添加表单元素,并对元素添加校验规则的效果

三、代码

点击添加按钮时,实现添加元素,并对元素进行校验

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

  1. // 列表-新增按钮  

  2.     $("#menuAdd").click(function(){  

  3.         var n=$(".cy-list-content").length+1;  

  4.         var oDiv=$('<div></div>');  

  5.         oDiv.addClass("cy-list-content");  

  6.         oDiv.html('<h5>第' + n + '行</h5>'  

  7.             +'<div class="form-group">'  

  8.             + '<textarea id="pushMenu['+(n-1)+'].text" class="form-control cy-text" rows="3" placeholder="请在此输入文字内容" name="pushMenu['+(n-1)+'].text"></textarea>'  

  9.             +'</div>'  

  10.             + '<span class="cy-inter-config">交互配置</span>'  

  11.             + '<select class="cy-config-select selectpicker" name="pushMenu['+(n-1)+'].menuType">'  

  12.             + '<option value="00" &
    gt;无</option><option value="01">默认反馈操作</option><
    option value="02">应用下载配置</option><option value="02a">网址访问
    配置</option><option value="03">短信订购配置</option>'
      

  13.             + '</select>'  

  14.             + '<div class="cy-select-message">'  

  15.             + '<h5>
    业务中心号码</h5><div class="form-group"><
    input type="text" class="form-control" id="windowSmsNum" name="pushMenu['
    +(n-1)+'].smsNum" /></div>'  

  16.             + '<h5>
    反馈内容编码</h5><div class="form-group"><
    input type="text" class="form-control" id="windowSmsOrder" name="pushMenu['
    +(n-1)+'].smsOrder" /></div>'  

  17.             + '</div>'  

  18.             + '<div class="cy-select-url">'  

  19.             + '<h5>URL
    地址</h5><div class="form-group"><
    input type="text" class="form-control" id="windowUrlPath" name="pushMenu['
    +(n-1)+'].url" /></div>'  

  20.             + '</div>'  

  21.             + '<div class="cy-second-confirm">'  

  22.             + '<label class="form-checkbox form-normal form-primary"><input type="checkbox" class="cy-second-con" id="windowConfirm" name="pushMenu['+(n-1)+'].needConfirm"></label>'  

  23.             + '<span class="cy-choose">已选</span>二次确认'  

  24.             + '</div>');  

  25.         oDiv.insertBefore($(".cy-btns"));  

  26.         $('.cy-config-select').selectpicker();  

  27.         var cDiv = $('<div></div>');  

  28.         cDiv.addClass("cy-content");  

  29.         cDiv.html("请在此输入推送业务内容");  

  30.         cDiv.css("borderbottom""1px solid #000");  

  31.         $(".cy-list").append(cDiv);  

  32.           

  33.         /*新增列表后,新增元素加入到Validator中*/  

  34.          $('#contentInfoForm').bootstrapValidator('addField''pushMenu['+(n-1)+'].text', {  

  35.                 validators: {  

  36.                     notEmpty: {  

  37.                         message: '推送业务内容不能为空'  

  38.                     }  

  39.                 }  

  40.             });  

  41.          $("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].smsNum',{  

  42.              validators: {  

  43.                     notEmpty: {  

  44.                         message: '业务中心号码不能为空'  

  45.                     }  

  46.                 }  

  47.          });  

  48.          $("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].smsOrder',{  

  49.              validators: {  

  50.                  notEmpty: {  

  51.                      message: '反馈内容编码不能为空'  

  52.                  }  

  53.              }  

  54.          });  

  55.          $("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].url',{  

  56.              validators: {  

  57.                  notEmpty: {  

  58.                      message: 'URL地址不能为空'  

  59.                  }  

  60.              }  

  61.          });  

  62.     });  

初始化bootstrapValidator,可以看到在这并没有对第4行进行初始化

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

  1. /*推送内容校验*/  

  2.     $("#contentInfoForm").bootstrapValidator({  

  3.         message : '该值无效',  

  4.         feedbackIcons : faIcon,  

  5.         //excluded : ':disabled',  

  6.         fields : {  

  7.             'pushMenu[0].text' : {  

  8.                 message : '弹窗内容无效',  

  9.                 validators : {  

  10.                     notEmpty : {  

  11.                         message : '弹窗内容不能为空'  

  12.                     }  

  13.                 }  

  14.             },  

  15.             'pushMenu[0].url' : {  

  16.                 message : 'URL无效',  

  17.                 validators : {  

  18.                     notEmpty : {  

  19.                         message : 'URL不能为空'  

  20.                     }  

  21.                 }  

  22.             },  

  23.             'pushMenu[0].smsNum' : {  

  24.                 message : '业务中心号码无效',  

  25.                 validators : {  

  26.                     notEmpty : {  

  27.                         message : '业务中心号码不能为空'  

  28.                     }  

  29.                 }  

  30.             },  

  31.             'pushMenu[0].smsOrder' : {  

  32.                 message : '反馈内容编码无效',  

  33.                 validators : {  

  34.                     notEmpty : {  

  35.                         message : '反馈内容编码不能为空'  

  36.                     }  

  37.                 }  

  38.             },  

  39.             'alphaID' : {  

  40.                 message : '列表标题无效',  

  41.                 validators : {  

  42.                     notEmpty : {  

  43.                         message : '列表标题不能为空'  

  44.                     }  

  45.                 }  

  46.             },  

  47.             'pushMenu[1].text' : {  

  48.                 message : '弹窗内容无效',  

  49.                 validators : {  

  50.                     notEmpty : {  

  51.                         message : '弹窗内容不能为空'  

  52.                     }  

  53.                 }  

  54.             },  

  55.             'pushMenu[1].url' : {  

  56.                 message : 'URL无效',  

  57.                 validators : {  

  58.                     notEmpty : {  

  59.                         message : 'URL不能为空'  

  60.                     }  

  61.                 }  

  62.             },  

  63.             'pushMenu[1].smsNum' : {  

  64.                 message : '业务中心号码无效',  

  65.                 validators : {  

  66.                     notEmpty : {  

  67.                         message : '业务中心号码不能为空'  

  68.                     }  

  69.                 }  

  70.             },  

  71.             'pushMenu[1].smsOrder' : {  

  72.                 message : '反馈内容编码无效',  

  73.                 validators : {  

  74.                     notEmpty : {  

  75.                         message : '反馈内容编码不能为空'  

  76.                     }  

  77.                 }  

  78.             },  

  79.             'pushMenu[2].text' : {  

  80.                 message : '弹窗内容无效',  

  81.                 validators : {  

  82.                     notEmpty : {  

  83.                         message : '弹窗内容不能为空'  

  84.                     }  

  85.                 }  

  86.             },  

  87.             'pushMenu[2].url' : {  

  88.                 message : 'URL无效',  

  89.                 validators : {  

  90.                     notEmpty : {  

  91.                         message : 'URL不能为空'  

  92.                     }  

  93.                 }  

  94.             },  

  95.             'pushMenu[2].smsNum' : {  

  96.                 message : '业务中心号码无效',  

  97.                 validators : {  

  98.                     notEmpty : {  

  99.                         message : '业务中心号码不能为空'  

  100.                     }  

  101.                 }  

  102.             },  

  103.             'pushMenu[2].smsOrder' : {  

  104.                 message : '反馈内容编码无效',  

  105.                 validators : {  

  106.                     notEmpty : {  

  107.                         message : '反馈内容编码不能为空'  

  108.                     }  

  109.                 }  

  110.             },  

  111.             'pushMenu[3].text' : {  

  112.                 message : '弹窗内容无效',  

  113.                 validators : {  

  114.                     notEmpty : {  

  115.                         message : '弹窗内容不能为空'  

  116.                     }  

  117.                 }  

  118.             }  

  119.         }  

  120.     });  

四、总结

addField(field,options)

addField方法的参数

field就是要动态添加校验规则表单元素的name,即例子中的 pushMenu['+(n-1)+'].text

options实际就是校验规则   即例子中的{
                validators: {
                    notEmpty: {
                        message: '推送业务内容不能为空'
                    }
                }

发表回复