BootStrap Validator

表单验证,必须有Form表单,需要用到form-group

如果使用了 input-group 无法显示出 校验提示

<div class="input-group">
  <span class="input-group-addon">姓名</span>
  <input type="text"  class="form-control" value="${username}" placeholder="姓名">
</div>

引入:

<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" />

<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>

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

}

}

}

}

});

});