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