Bootstrap Validator验证是一个jQuery插件来验证表单域,配合Bootstrap一起使用来快速完成我们的验证需求
我们来通过一个简单的示例(验证用户名和密码)来了解它的基础用法
首先引入jquery和bootstrap、bootstrapValidator.js和bootstrapValidator.css文件
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/> <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
通过bootstrap写一个基本的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> <div class="form-group"> <button type="submit" name="submit" class="btn btn-primary">Submit</button> </div> </form>
JS部分
$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' } } }, email: { validators: { notEmpty: { message: '邮箱地址不能为空' } } } } }); });
常用的验证类型
notEmpty:非空验证;
stringLength:字符串长度验证;
regexp:正则表达式验证;
emailAddress:邮箱地址验证(都不用我们去写邮箱的正则了~~)
除此之外,在文档里面我们看到它总共有46个验证类型,我们抽几个常见的出来看看:
base64:64位编码验证;
between:验证输入值必须在某一个范围值以内,比如大于10小于100;
creditCard:身份证验证;
date:日期验证;
ip:IP地址验证;
numeric:数值验证;
phone:电话号码验证;
uri:url验证;
其实感觉和Jquery-validator的使用方法相似,大家不妨自己体验一下
评论前必须登录!
注册