bootstrapValidator表单验证插件学习


Posted in Javascript onDecember 30, 2016

本文实例为大家分享了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表单验证插件学习

bootstrapValidator官网:bootstapValidator

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 #Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 #Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 #Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 #Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 #Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 #Javascript
jQuery中页面返回顶部的方法总结
Dec 30 #Javascript
You might like
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python实现数据库编程方法详解
2015/06/09 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python实现顺序表的简单代码
2018/09/28 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
浅析matlab中imadjust函数
2020/02/27 Python
为什么python比较流行
2020/06/19 Python
通俗讲解python 装饰器
2020/09/07 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
自我介绍演讲稿
2014/01/15 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
求职自我推荐信
2014/06/25 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
维稳工作情况汇报
2014/10/27 职场文书
个人总结怎么写
2015/02/26 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server