用requirejs插件来加载使用bootstrapValidator的方法和在线实例演示推荐 亲测 原创 收藏

文章标签: 使用实例 RequireJS实例
  • :
  • 04-08 21:10
  • :
  • 61次
  • :
  • 0条
  • 2赞

简介本文主要讲的是通过requirejs插件来加载bootstrapValidator插件的具体方法步骤和在线实例演示。l

上一篇,站长和大家分享了bootstrapValidator插件的使用方法[文章地址:http://www.aijquery.cn/Html/bootstrapValidator/54.html],看过这篇文章的朋友,应该对我们在引用bootstrapValidator插件时,会感到非常头疼吧,不光要引入bootstrapValidator的js文件,还要引入bootstrapValidator的css文件,并且在实际中,我们的网页里肯定还要引入其它许多的插件JS,这样就让我们的网页看起来好“臃肿”,而requirejs插件就是为了解决这样的问题而诞生的。

如果您要了解更多关于requirejs插件的问题,可以点这里http://www.aijquery.cn/Html/requirejs/


这里站长和大家说说如何用requirejs插件来在我们的网页里引入bootstrapValidator插件:

这里是在线演示:requirejs加载bootstrapValidator在线演示

在上面的实例里,站长是为了大家看的方便,所以把具体的代码都直接写了出来,但在实际中,我们是可以把这些代码都单独的写在一个JS文件里的,这样就能让我们的网页看起来非常的“清爽”和“干净”。


下面站长来和大家说说具体的步骤:

第一步:引入requirejs插件的JS文件:

<script language="JavaScript" src="//cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

第二步:配置require.config:

require.config({	
    paths: {		
        "jquery": "//apps.bdimg.com/libs/jquery/1.9.1/jquery.min",		
        "css": "//cdn.bootcss.com/require-css/0.1.10/css.min",		
        "bootstrapValidator":"//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min"	
    },	
    shim: {		
        "bootstrapValidator": {			
        deps: ['css!//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min',"jquery"]		
    }	
}});

PS:上面代码里,我们还引入了requirejs插件的一个功能插件:require-css,require-css是用来引入css样式文件的一个插件,有想要了解的朋友可以点这里:require-css的使用方法及实例

第三步:编写我们具体的代码:

require(["jquery","bootstrapValidator"], function($) {	
    $("#AngelForm").bootstrapValidator({     		
        //这里写你的具体的验证代码
    });	
    $("#AngelForm").on('success.form.bv', function(e) {		
        e.preventDefault();		
        var $form = $(e.target);		
        var bv = $form.data('bootstrapValidator');		
        var action ="/Html/aijquery/ajax.asp";		
        $.post(action,$form.serialize(),function(result){					
               //这里写具体的提交表单后,处理表单返回数据的代码
        }, "json");	
    });
});

这一步和第二步的内容是可以写到一个JS文件里,然后引入到网页当中的;

上面代码里,站长为了大家看的方便,把具体的代码都省略了,如果想要了解具体的代码,大家可以看在实例里的源码部分,或者看站长写的这篇文章:bootstrapValidator表单验证插件的使用API文档

PS:本文原创首发:爱jQuery www.aijquery.cn

好了,关于requirejs插件引入bootstrapValidator插件就是这么的简单!



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-20 11:21:40