您的位置：首页 > Web前端 > BootStrap

bootstrapValidator表单验证插件

2018-01-16 17:49 579 查看

bootstrapValidator——一个很好用的表单验证插件，再也不用手写验证规则啦！

bootstrapValidator官方文档： http://bootstrapvalidator.votintsev.ru/api/

一、举个丽子：

写了一个小例子

先来看一下效果吧！

预览效果查看源码

二、具体实现步骤如下：

1、下载jquery、bootstrap、bootstrapValidator

bootstrapValidator下载地址： https://github.com/nghuuphuoc/bootstrapvalidator/commit/c023475236f66baab72975887a26e51d65df72f7

在这里下载后，解压bootstrapValidator-master，里面会有jquery、bootstrap、bootstrapValidator。其中bootstrap和jquery在vendor文件夹中，bootstrapValidator在src文件夹中。直接复制过来用就可以了，不用单独一个一个下载。在demo文件夹中有很多例子，可以直接拿过来用。

注意：如果bootstrap或jquery是单独下载的，可能会因为版本不一致，导致验证时，不会实时更新状态，最好使用下载后bootstrapValidator-master中的jquery和bootstrap。

2、将jquery、bootstrap、bootstrapValidator引入到文件中(注意引入的顺序)

3、编写html、css、js

三、下面来介绍我自己写的小例子

写了一个注册表单，其中：

1、用户名必须输入汉字；

2、密码和确认输入的必须一致，长度为6-16位；

3、手机号必须为数字，且是正确的手机号。不满足以上条件会有相应的提示。

四、代码实现：

1、html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrapValidatorDemo</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrapValidator/bootstrapValidator.min.css">
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator/bootstrapValidator.min.js"></script>

</head>
<body>
<div class="container">
<div class="row">
<h2 class="title">用户注册</h2>
</div>
<form id="infoForm" class="form-horizontal bv-form" enctype="multipart/form-data">
<div class="row form-group">
<label>用户名:</label>
<input type="text" class="form-control" name="username" placeholder="请输入用户名"></input>
</div>
<div class="row form-group">
<label>密码:</label>
<input type="password" class="form-control" name="password" placeholder="请输入密码"></input>
</div>
<div class="row form-group">
<label>确认密码:</label>
<input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码"></input>
</div>
<div class="row form-group">
<label>手机号:</label>
<input type="text" class="form-control" name="tel" placeholder="请输入手机号"></input>
</div>
<div class="row form-group" style="display: flex; justify-content: space-around;">
<button type="submit" class="btn btn-info" id="submit">提 交</button>
<button class="btn btn-default" id="reset">重 置</button>
</div>
</form>
</div>
</body>
</html>

2、css

<style type="text/css">
.container {
margin-top: 30px;
width: 500px;
}
.title {
font-weight: 700;
text-align: center;
margin-bottom: 30px;
}
</style>

3、js

<script type="text/javascript">
$('#reset').click(function(e){
e.preventDefault();//阻止默认事件
$('#infoForm input').val('');
$('#infoForm').data('bootstrapValidator').resetForm();
});
$('#infoForm').bootstrapValidator({
message : '输入的值无效!',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
username : {
validators : {
notEmpty : {
message : '用户名不能为空！'
},
regexp : {
regexp : /[\u4E00-\u9FA5]/,
message : '请输入汉字！'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空！'
},
different: {
field: 'username',
message: '密码不能与用户名相同！'
},
stringLength: {
min: 6,
max: 16,
message: '密码长度为6~16位！'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: '请确认密码！'
},
identical: {
field: 'password',
message: '密码和确认密码不一致！'
}
}
},
tel : {
validators : {
notEmpty : {
message : '手机号不能为空！'
},
regexp : {
regexp : /^1[34578]\d{9}$/,
message : '请输入正确的手机号！'
},
stringLength: {
min: 11,
max: 11,
message: '请输入11位手机号码！'
}
}
}
}
}).on("success.form.bv", function(e) {
e.preventDefault();//阻止默认事件
alert('用户注册成功！');
})
</script>

五、需要注意的地方：

1、jquery、bootstrap、bootstrapValidator最好使用下载的bootstrapValidator-mastar中的文件，否则可能会导致验证状态不会实时更新

2、表单中需要验证的元素都必须包裹在有类名form-group的父盒子中，否则验证不起作用

3、验证的图标

这部分是验证时的图标，也可以不加这部分，如果加了，需要将bootstrapValidator-master --> vendor --> fonts文件夹复制到自己的文件目录中，与bootstrap.css的父级同级

这样图标就会显示出来了。

如果对您有帮助，记得点赞哦！需要您的支持与鼓励，同时也欢迎您留下宝贵意见！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航