BootStrapValidator初使用

最新推荐文章于 2020-05-27 21:04:18 发布

-梅子酒-

最新推荐文章于 2020-05-27 21:04:18 发布

阅读量362

点赞数

分类专栏： BootStrap BV 文章标签： bootstrap BV

本文链接：https://blog.csdn.net/qq_24558789/article/details/54970426

版权

BootStrap 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

bootstrap：能够增加兼容性的强大框架.

因为项目需要数据验证，看bootstrapValidator 还不错，就上手一直，完美兼容，话不多说。
bootstrapValidator的github地址
需要引用css：

bootstrap.min.css

bootstrapValidator.min.css

js:

jquery-1.10.2.min.js

bootstrap.min.js

bootstrapValidator.min.js
以上这些都是必须的。

先上个简单的例子,只要导入相应的文件可以直接运行：

<!DOCTYPE html>
<html>
<head>
    <title>Using Ajax to submit data</title>

    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/bootstrapValidator.css"/>

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
    <!-- class都是bootstrap定义好的样式，验证是根据input中的name值 -->
    <form id="defaultForm" method="post" class="form-horizontal" action="aaa.html">
        <!-- 下面这个div必须要有，插件根据这个进行添加提示 -->
        <div class="form-group">
            <label class="col-lg-3 control-label">Username</label>
            <div class="col-lg-5">
                <input type="text" class="form-control" name="username" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 control-label">Email address</label>
            <div class="col-lg-5">
                <input type="text" class="form-control" name="email" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 control-label">Password</label>
            <div class="col-lg-5">
                <input type="password" class="form-control" name="password" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-lg-9 col-lg-offset-3">
                <button type="submit" class="btn btn-primary">Sign up</button>
            </div>
        </div>
    </form>

</div>
<script type="text/javascript">
    $(document).ready(function() {
        /**
         * 下面是进行插件初始化
         * 你只需传入相应的键值对
         * */
        $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {/*验证*/
                username: {/*键名username和input name值对应*/
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '用户名不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30之间'
                        }/*最后一个没有逗号*/
                    }
                },
                password: {
                    message:'密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30之间'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required and can\'t be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                }
            }
        });
    });
</script>
</body>
</html>

当然，以上都是插件写好的规则，如果想自己加匹配规则怎么办呢？

如下只要在input相对应的键值中加入一个regexp:{}键值对（在上面的js基础上修改）

username: {/*键名和input name值对应*/
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '用户名不能为空'
                        },
                        regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '只能是数字和字母_.'
                        },
                        stringLength: {/*长度提示*/
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30之间'
                        }/*最后一个没有逗号*/
                    }
                },

-梅子酒-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrapValidator初使用

bootstrap：能够增加兼容性的强大框架.因为项目需要数据验证，看bootstrapValidator 还不错，就上手一直，完美兼容，话不多说。 bootstrapValidator的github地址需要引用css：bootstrap.min.cssbootstrapValidator.min.cssjs:jquery-1.10.2.min.jsbootstrap.min.jsbootst
复制链接

扫一扫