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压缩工具下载集合
Mar 06 Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
js的写法基础分析
Jan 17 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JS前端加密算法示例
Dec 22 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 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
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
详解Python中for循环的使用
2015/04/14 Python
python实现识别相似图片小结
2016/02/22 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
七年级地理教学反思
2014/01/26 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
同事去世追悼词
2015/06/23 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
2022年显卡天梯图(6月更新)
2022/06/17 数码科技