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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
判断用户是否在线的代码
Mar 05 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
JS实现li标签的删除
Apr 12 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 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中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
JScript的条件编译
2007/05/29 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python中使用SAX解析xml实例
2014/11/21 Python
python2 与python3的print区别小结
2018/01/16 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python3运算符常见用法分析
2020/02/14 Python
python绘制汉诺塔
2021/03/01 Python
英国鞋网:Rubber Sole
2020/03/03 全球购物
财务出纳岗位职责
2014/02/03 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
防汛通知
2015/04/25 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
2016年元旦寄语
2015/08/17 职场文书
2015元旦感言
2015/12/09 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS