使用BootStrapValidator来完成前端输入验证

前端开发作者： 2024-08-19 18:00:01

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图，看看完成后的结果：

导读热词

正文

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

<div class="row">
<form action="dologin" method="post" id="loginform">
 <div class="form-group">
  <div class="input-group input-group-md">
     <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
     <input type="text" class="form-control" name="username" placeholder="用户名"  />
  </div>
 </div>
 <div class="form-group">
  <div class="input-group input-group-md">
     <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
     <input type="password" class="form-control" name="pwd" placeholder="密码"  />
  </div>
 </div>
 <div class="well well-sm" style="text-align:center;">
  
     <input type="radio" name="kind" value="tea"> 老师
     <input type="radio" name="kind" value="stu"> 学生
 </div>
 <button type="submit" class="btn btn-success btn-block">
                                                登录
    </button>
 </form> 
 </div>

$(document).ready(function(){
   // 在这里写你的代码...
 $('#loginform').bootstrapValidator({
  message:"您的输入值不合法",  FeedbackIcons:{
   valid: 'glyphicon glyphicon-ok',            invalid: 'glyphicon glyphicon-remove',            validating: 'glyphicon glyphicon-refresh'
  },  fields:{
   username:{
    validators:{
     notEmpty:{
      message:'用户名不能为空'
     }
    }
   },   pwd:{
    validators:{
     notEmpty:{
      message:'请输入密码'
     }
    }
   }
  }, });
 });