基于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'
                    }
                }
            }
        }
    });
});

转自：JQ酷  http://www.jqcool.net/jquery-bootstrapvalidator.html