登录  /  注册
首页 > web前端 > js教程 > 正文

Bootstrap 表单验证formValidation 的实例详解

PHPz
发布: 2018-05-14 16:39:38
原创
7498人浏览过

这篇文章主要介绍了bootstrap 表单验证formvalidation 实现表单动态验证功能,需要的朋友可以参考下bootstrap教程

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

init状态:

这里写图片描述 

点击“+”后:

这里写图片描述 

验证后:

这里写图片描述

知识点:

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

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

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

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

好开始:

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

<p id="posXY" class=" panel panel-default ">
<!-- 添加-->
                <p class="panel-heading" >设置车库xy坐标</p>
                <p class="addPos form-group">
                  <p 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"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posX" placeholder="X"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posY" placeholder="Y"/>
                  </p>
                  <p 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>
                  </p>
                </p>
                <!-- 删除 -->
                <p class="removPos form-group hide" id="posTemplate">
                  <p 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"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posX" placeholder="X"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posY" placeholder="Y"/>
                  </p>
                  <p 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>
                  </p>
                </p>
</p>
登录后复制

然后来个js:

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

当用户输入garageNo的值后:

clickBindGarageNo(panelId,idx){
    $form.formValidation(&#39;addField&#39;, "garageNo"+idx, differentValid(diffArr.toString()))
      var fv =$form.data(&#39;formValidation&#39;);
      fv.validate();
}
登录后复制

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

这里写图片描述

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

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

$form.formValidation(&#39;revalidateField&#39;, "field");
登录后复制

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

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

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

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

$btn.click(function(){
//....
retrun false;
)}
登录后复制

【相关推荐】

1. Javacript免费视频教程

2. Nodejs中常用中间件body-parser的实例详解

3. JavaScript表单验证实现代码_javascript技巧

4. 单行 JS 实现移动端金钱格式检验

5. vue v-model表单控件绑定的实例教程

以上就是Bootstrap 表单验证formValidation 的实例详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号