站长资源
中国站长网站

Bootstrap Validator表单验证插件

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的使用方法相似,大家不妨自己体验一下


免费下载  在线演示  
×

站长资源极速下载通道: Bootstrap Validator表单验证插件

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » Bootstrap Validator表单验证插件

评论 抢沙发

评论前必须登录!