bootstrapvalidator插件怎么用

Posted 2023-05-10

参考技术A 来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

我们知道，既然是表单验证，那么我们在cshtml页面就必须要有一个Form，并且我们知道Form里面取元素都是通过name属性去取值的，所以，表单里面的元素都要有一个name的属性值。

<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: '邮箱地址不能为空'




);
);

bootstrapValidator表单校验插件使用教程

参考技术A 因为bootstrapValidator插件是基于jquery和bootstrap的，所以需要引入jquery和bootstrap对应的js和css文件。

对应的文件引入之后，就可以使用插件了，这是官方API网址： http://bootstrapvalidator.votintsev.ru/api/

其他节点都可以通过name或者id添加校验。

bootstrapValidator已经提供了很多校验的类型，下面来一一介绍一下：