bootstrapvalidator验证中样式问题汇总

最新推荐文章于 2022-09-05 13:42:47 发布

青州网站建设-鼎诚网络

最新推荐文章于 2022-09-05 13:42:47 发布

阅读量891

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS技术文档 javascript

本文链接：https://blog.youkuaiyun.com/qingzhouwangzhan/article/details/103550521

这篇博客汇总了在使用BootstrapValidator时遇到的样式问题及其解决方案，强调了正确引入相关资源文件，如spin.sea.js、ladda-themeless.min.css等，以实现提交表单时的动画效果。同时提醒读者注意样式写法应基于Bootstrap来确保正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link rel="stylesheet" type="text/css" href="/js/bootstrapValidator/bootstrapValidator.min.css">
<link rel="stylesheet" type="text/css" href="/js/ladda/ladda-themeless.min.css">

引入以上代码

再创建一个文件

<script>
    seajs.use('message');
</script>

bootstrapvalidator 的样式是基于bootstrap的所以写法上需要注意应该如下写法：

 <form class="bs-example bs-example-form " role="form" id="myform">

                    <div class="form-group input-box">
                        <div class="input-group">
                            <input type="text" class="form-control" name="name" placeholder="姓名：">
                        </div>

                    </div>
 </form>

如果需要提交后的动画效果需要引入：

<link rel="stylesheet" type="text/css" href="/js/ladda/ladda-themeless.min.css">

/js/ladda/ 目录下是要有三个文件：
spin.sea.js
ladda-themeless.min.css
ladda.sea.js
ladda.min.css

message 文件中放入以下代码：

define(function (require, exports, module) {
   
   

    require('jquery');
    require('validator');
    var Ladda = require('ladda');
    var dialog=require('dialog');
    //验证表单信息
    $("#showFormBox").click(function () {
   
   
        $("#formBox").show()
    })

    $("#myform").bootstrapValidator({
   
   
        message: '输入信息验证不通过！',
        feedbackIcons: {
   
   
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'