bootstrapValidator表单验证插件学习

本文实例为大家分享了bootstrapValidator表单验证的具体代码，供大家参考，具体内容如下

1.页面引入css、js

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

2.页面表单

<div class="modal fade" id="details" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 <div class="modal-dialog"> 
  <div class="modal-content"> 
   <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btn_colse">× 
    </button> 
    <h4 class="modal-title" id="title">系统用户信息</h4> 
   </div> 
   <div class="modal-body"> 
   <form class="form-horizontal" role="form" id="detailForm" action="" method="post"> 
    <input type="hidden" class="form-control" id="id" name="id"> 
    <div class="form-group"> 
    <label for="userName" class="col-sm-2 control-label">用户名</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="userName" name="userName"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="userPassword" class="col-sm-2 control-label">密码</label> 
    <div class="col-sm-10"> 
     <input type="password" class="form-control" id="userPassword" name="userPassword"> 
    </div> 
    </div> 
     
    <div class="form-group"> 
    <label for="email" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="email" name="email"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="alias" class="col-sm-2 control-label">别名</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="alias" name="alias"> 
    </div> 
    </div> 
     
    <div class="form-group"> 
    <label for="personId" class="col-sm-2 control-label">隶属人员</label> 
    <div class="col-sm-4"> 
     <input type="text" class="form-control" id="personId" name="personId"> 
    </div> 
    <label for="enabled" class="col-sm-2 control-label">是否可用</label> 
    <div class="col-sm-4"> 
     <input type="radio" name="enabled" value="true" checked>是 
     <input type="radio" name="enabled" value="false">否 
    </div> 
    </div> 
     
    <div class="form-group"> 
    <label for="accountExpired" class="col-sm-3 control-label">账号是否过期</label> 
    <div class="col-sm-2"> 
     <input type="radio" name="accountExpired" value="true">是 
     <input type="radio" name="accountExpired" value="false" checked>否 
    </div> 
    <label for="accountLocked" class="col-sm-3 control-label">账号是否锁定</label> 
    <div class="col-sm-2"> 
     <input type="radio" name="accountLocked" value="true">是 
     <input type="radio" name="accountLocked" value="false" checked>否 
    </div> 
    </div> 
     
     
    <div class="form-group"> 
    <label for="credentialsExpired" class="col-sm-3 control-label">密码是否过期</label> 
    <div class="col-sm-2"> 
     <input type="radio" name="credentialsExpired" value="true">是 
     <input type="radio" name="credentialsExpired" value="false" checked>否 
    </div> 
    <label for="superAdmin" class="col-sm-3 control-label">是否超级管理员</label> 
    <div class="col-sm-2"> 
     <input type="radio" name="superAdmin" value="true">是 
     <input type="radio" name="superAdmin" value="false" checked>否 
    </div> 
    </div> 
     
    <div class="form-group"> 
    <label for="memo" class="col-sm-2 control-label">备注</label> 
    <div class="col-sm-10"> 
     <textarea cols="80" rows="3" class="form-control" id="memo" name="memo"></textarea> 
    </div> 
    </div> 
   <div style="width: 250px; margin: 20px auto;"> 
    <button type="button" id="saveBtn" class="btn btn-primary" >保存</button> 
    <button type="button" id="resetBtn" style="margin-left:10px" class="btn btn-danger" >重置</button> 
    <button type="button" id="cancelBtn" style="margin-left:10px" class="btn btn-default" >取消</button> 
   </div> 
  </form> 
   </div> 
  </div><!-- /.modal-content --> 

3.js初始化验证

//验证表单 
 var validatorForm = { 
   //验证规则 
   validatorReuls:function(){ 
    $("#detailForm").bootstrapValidator({ 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      userName:{ 
        validators: { 
         notEmpty: { 
          message: '用户名不能为空' 
         }, 
         remote: {////ajax验证。服务器端返回的 result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true} 
          url: contextPath+"/sysUser/username", 
          type:"GET", 
          data: function(validator) { 
           var x_={ 
            userName: validator.getFieldElements('userName').val() 
           }; 
           return x_; 
          }, 
          message: '用户名已注册，请重新输入' 
         } 
        } 
        
      }, 
      email: { 
       validators: { 
        notEmpty: { 
         message: '邮箱不能为空' 
        }, 
        regexp: {//正则表达式 
         regexp: Regex.email, 
         message: '邮箱地址格式不正确' 
        } 
       } 
      } 
      ,userPassword: { 
       validators: { 
        notEmpty: { 
         message: '密码不能为空' 
        }, 
        regexp: { 
         regexp: Regex.password_6_18, 
         message: '密码只能输入6-18个字母、数字、下划线 ' 
        } 
       } 
      } 
     } 
    }); 
   }, 
   //验证表单 
   validate: function(formId){ 
     $('#'+formId).data('bootstrapValidator').validate(); 
   }, 
   //验证表单是否通过验证 
   isValid : function(formId){ 
    return $('#'+formId).data('bootstrapValidator').isValid() 
   }, 
   //清空表单验证 
   clearValidate : function(formId){ 
    $('#'+formId).bootstrapValidator('resetForm'); 
   } 
 }

 4.最后呈现的效果

bootstrapValidator官网：bootstapValidator

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# bootstrap  # Validator  # 表单验证  # bootstrapValidator.min.js表单验证插件  # Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）  # 实用又漂亮的BootstrapValidator表单验证插件  # BootstrapValidator超详细教程(推荐)  # jquery插件bootstrapValidator数据验证详解  # bootstrapValidator bootstrap-select验证不可用的解决办法  # Bootstrapvalidator校验、校验清除重置的实现代码(推荐)  # BootstrapValidator实现注册校验和登录错误提示效果  # 基于jQuery 实现bootstrapValidator下的全局验证  # Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解  # 表单  # 为空  # 下划线  # 大家分享  # 不正确  # 具体内容  # 官网  # 大家多多  # 清空  # 邮箱地址  # 重新输入  # 正则表达式  # button  # close  # header  # btn_colse  # dismiss  # title  # data  # dialog 

相关文章： ,网站推广常用方法？  c# 在高并发场景下，委托和接口调用的性能对比  如何通过FTP空间快速搭建安全高效网站？  如何通过万网虚拟主机快速搭建网站？  如何在IIS中新建站点并配置端口与物理路径？  北京的网站制作公司有哪些,哪个视频网站最好？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  制作网站的模板软件,网站怎么建设？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  网站制作网站,深圳做网站哪家比较好？  如何撰写建站申请书？关键要点有哪些？  北京网站制作网页,网站升级改版需要多久？  php能控制zigbee模块吗_php通过串口与cc2530 zigbee通信【介绍】  如何确保FTP站点访问权限与数据传输安全？  免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  网站制作大概多少钱一个,做一个平台网站大概多少钱？  建站主机如何选？高性价比方案全解析  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  云南网站制作公司有哪些,云南最好的招聘网站是哪个？  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  一键制作网站软件下载安装,一键自动采集网页文档制作步骤？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  ,有什么在线背英语单词效率比较高的网站？  如何快速搭建虚拟主机网站？新手必看指南  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  5种Android数据存储方式汇总  青岛网站建设如何选择本地服务器？  制作证书网站有哪些,全国城建培训中心证书查询官网？  建站之星与建站宝盒如何选择最佳方案？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  网站制作服务平台,有什么网站可以发布本地服务信息？  创业网站制作流程,创业网站可靠吗？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  平台云上自助建站如何快速打造专业网站？  如何在Golang中指定模块版本_使用go.mod控制版本号  如何配置IIS站点权限与局域网访问？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  大连网站制作公司哪家好一点,大连买房网站哪个好？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  建站之星logo尺寸如何设置最合适？  如何选择靠谱的建站公司加盟品牌？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  公众号网站制作网页,微信公众号怎么制作？  制作网站外包平台,自动化接单网站有哪些？  孙琪峥织梦建站教程如何优化数据库安全？  建站之星伪静态规则如何设置？  建站之星安装后界面空白如何解决？  建站VPS配置与SEO优化指南：关键词排名提升策略