基于bootstrap3最好的jquery表单验证插件BootstrapValidator

 

 

摘自推酷

 

BootstrapValidator是一款最好的jquery表单字段验证插件，它是基于boostrap3设计的，插件需要jquery与boostrap3才能正常运行，不喜欢bootstrap的朋友慎下。

特点

代码从新构建,清晰明了

内置验证器和计数!

容易编写新确认器

显示基于字段有效性反馈图标

支持Ajax验证器和表单提交

字段验证器可以启用/禁用

使用方法

引入核心库，插件是基本jquery和bootstrap的，需先引入。

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

<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

 

<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>

 

<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>

 

//如果你想使用默认的语言包，请引入下面的文件

<script type="text/javascript" src="/path/to/src/js/language/languagecode_COUNTRYCODE.js"></script>

构建html代码

<form>

    <div class="form-group">

        <label>Username</label>

        <input type="text" class="form-control" name="username" />

    </div>

    <div class="form-group">

        <label>Email address</label>

        <input type="text" class="form-control" name="email" />

    </div>

</form>

写入JS初始化插件

$(document).ready(function() {

    $('.registerForm').bootstrapValidator({

        message: 'This value is not valid',

        feedbackIcons: {

            valid: 'glyphicon glyphicon-ok',

            invalid: 'glyphicon glyphicon-remove',

            validating: 'glyphicon glyphicon-refresh'

        },

        fields: {

            username: {

                message: 'The username is not valid',

                validators: {

                    notEmpty: {

                        message: 'The username is required and cannot be empty'

                    },

                    stringLength: {

                        min: 6,

                        max: 30,

                        message: 'The username must be more than 6 and less than 30 characters long'

                    },

                    regexp: {

                        regexp: /^[a-zA-Z0-9_]+$/,

                        message: 'The username can only consist of alphabetical, number and underscore'

                    }

                }

            },

            email: {

                validators: {

                    notEmpty: {

                        message: 'The email is required and cannot be empty'

                    },

                    emailAddress: {

                        message: 'The input is not a valid email address'

                    }

                }

            }

        }

    });

});