Bootstrap 表单验证formValidation 实现表单动态验证功能


Posted in Javascript onMay 17, 2017

动态添加input并动态添加新验证方式!

init状态:

Bootstrap 表单验证formValidation 实现表单动态验证功能 

点击“+”后:

Bootstrap 表单验证formValidation 实现表单动态验证功能 

验证后:

Bootstrap 表单验证formValidation 实现表单动态验证功能

知识点:

1 先去官网下载:http://formvalidation.io/

2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过。

3 用到的关键字:addField、removeField、different

4注意一点就是官网里的例子他们的name是不一样的。我这里比较偷懒。且项目ajax的时候不是用的form表单提交,而是自己并接成json提交,所以x,y的name的名字一样。

好开始:

首先是在html里面必须要有一个 “+” 标记为addPos,然后有一个“-” 标记为“removPos,

<div id="posXY" class=" panel panel-default ">
<!-- 添加-->
                <div class="panel-heading" >设置车库xy坐标</div>
                <div class="addPos form-group">
                  <div class="col-lg-4 col-sm-4 col-xs-4" >
                    <input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
                  </div>
                  <div class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posX" placeholder="X"/>
                  </div>
                  <div class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posY" placeholder="Y"/>
                  </div>
                  <div class="col-lg-2 col-sm-2 col-xs-2" >
                    <button type="button" class="btn btn-default addButtonPos"><i class="glyphicon glyphicon-plus"></i></button>
                  </div>
                </div>
                <!-- 删除 -->
                <div class="removPos form-group hide" id="posTemplate">
                  <div class="col-lg-4 col-sm-4 col-xs-4" >
                    <input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
                  </div>
                  <div class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posX" placeholder="X"/>
                  </div>
                  <div class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posY" placeholder="Y"/>
                  </div>
                  <div class="col-lg-2 col-sm-2 col-xs-2" >
                    <button type="button" class="btn btn-default removeButtonPos"><i class="glyphicon glyphicon-minus"></i></button>
                  </div>
                </div>
</div>

然后来个js:

/**
   * pos添加
   * @param $that
   */
  function addButtonPosClick($that){
    var panelId = $that.parents(".topTemplate").attr("id");
    var $form=$('#'+panelId+"form")
//    defaultPanel(panelId)
    var bookIndex=typeObj[panelId]++;
    console.log(panelId,bookIndex)
    var $template = $('#'+panelId+' #posTemplate'),
      $clone =$template
        .clone()
        .removeClass('hide')
        .removeAttr('id')
        .attr('step',bookIndex)
        .insertBefore($template);
    // Update the name attributes
    $clone
      .find('[name="garageNo"]').attr({"step":bookIndex,"name":"garageNo"+bookIndex})
      .click(function(){
        clickBindGarageNo(panelId,bookIndex)
      }).end()
      .find('[name="posX"]').attr("step",bookIndex).end()
      .find('[name="posY"]').attr("step",bookIndex).end()
    // Add new fields
    // Note that we also pass the validator rules for new field as the third parameter
//    $('#defaultForm')
//    gFieldArr.push(panelId+'[' + bookIndex + '].garageNo')
    $form
      .formValidation('addField', "garageNo"+bookIndex, formObj.sameAs(false))
      .formValidation('addField', 'posX', myPosXY)
      .formValidation('addField', 'posY', myPosXY)
  }
 function myFormValidation($form){
//    var $form=$("#"+$panelId+"form")
    $form
        .formValidation({
          framework: 'bootstrap',
          locale: 'zh_CN',
          message: '值无效',
          icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
          },
          fields:
          {
            myimg:{
              validators: {
                notEmpty: {
                  message: '请选择一个文件上传'
                },
                file: {
                  extension: 'jpeg,jpg,png',
                  type: 'image/jpeg,image/png',
                  maxSize: 1*1024 * 1024,
                  message: '该文件必须为jpeg,jpg,png格式和必须不超过1MB的大小'
                }
              }
            }
          }
        })
        .on('click', '.addButtonPos', function() {
          addButtonPosClick($(this))
        })
        //Remove button click handler
        .on('click', '.removeButtonPos', function() {
          var $that   = $(this)
          var panelId = $that.parents(".topTemplate").attr("id");
//           defaultPanel(panelId)
          var $row = $(this).parents('.form-group'),
              index = $row.attr('step');
//          var myname='[' +index + ']'
          var bookIndex= typeObj[panelId]--;
//          $('#defaultForm')
          $form
                   .formValidation('removeField', $row.find('[name="garageNo'+bookIndex+'"]'))
                   .formValidation('removeField', $row.find('[name="posX"]'))
                   .formValidation('removeField', $row.find('[name="posY"]'))
          // Remove element containing the fields
          $row.remove();
        })

因为我的项目有多个表单提交。但是业务相似所以都用这几个函数

比如说: var form=(“#”+panelId+”form”)用panelId来区分是多个表单。

上面说到x,y的name用的是一样的。但是细心的就会发现garageNo是不一样的名称。后面添加了bookindex,为什么呢。

因为业务需求。同一个表单中的garageNo的值不可以相同。好比如说每一个人的身份号不可以相同但是你和你同桌都可以是女的也都可以18岁。。。。

上面已经很好的使用了关键字removeField和addField

garageNo的值不可以相同。怎么弄呢。请看下面:

var differentValid= function(diffstr){
    var vv={
      validators: {
        different: {
          field: diffstr,
          message: '不能有相同的停车库'
        }
      }
    }
    return vv
  }

当用户输入garageNo的值后:

clickBindGarageNo(panelId,idx){
    $form.formValidation('addField', "garageNo"+idx, differentValid(diffArr.toString()))
      var fv =$form.data('formValidation');
      fv.validate();
}

这个diffArr.toString(),是啥呢。这个是我遍历了所有条目的garageNo的name的字符串例如:有3条条目,idx=1 焦点在1上。那么diffArr=[“garageNo0”,”garageNo2”,]

Bootstrap 表单验证formValidation 实现表单动态验证功能 

注意一个bug:如果用多了input,你会发现有时input不会自动验证。比如说验证日期的时候用了日期插件点击日期回来后input没有验证。

这个时候就需要再手动验证一次。 上面那段代码是 先添加新的验证方式,然后验证整个表单。如果你只是想要验证一个input 请用:

$form.formValidation('revalidateField', "field");

还有一个关于提交的细节:

当我们没有设置提交按钮。比起提交按钮在form表单内。他这个插件是会帮你自动提交。但是你也会发现。如果你提交服务失败。他会自动刷新然后你的页面就变成404页面或其他错误页面。

但是有的时候我们不想他刷新。咋办?

网上好多ajax 提交不刷新的教程。。我比较喜欢用一种就是。我不把提交按钮放在form里面。然后:

$btn.click(function(){
//....
retrun false;
)}

以上所述是小编给大家介绍的Bootstrap 表单验证formValidation 实现表单动态验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 #Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 #Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 #Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 #Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 #Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 #Javascript
vue之nextTick全面解析
May 17 #Javascript
You might like
php过滤敏感词的示例
2014/03/31 PHP
php制作文本式留言板
2015/03/18 PHP
php微信公众平台开发类实例
2015/04/01 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP 类与构造函数解析
2017/02/06 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
商业计算机应用专业自荐书
2014/06/09 职场文书
军训拉歌口号
2014/06/13 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
课外访万家心得体会
2014/09/03 职场文书
申报优秀教师材料
2014/12/16 职场文书
护理实习生带教计划
2015/01/16 职场文书
语文复习计划
2015/01/19 职场文书
老龙头导游词
2015/02/11 职场文书
电力安全学习心得体会
2016/01/18 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技