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

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

(0)

相关推荐

  • Bootstrap下拉菜单效果实例代码分享

    下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊,而是导航条中常见的那种. Bootstrap官方网站对下拉菜单Dropdown的解释很少,即使是他们的英文官方网站. 对于如何更改下拉菜单的背景颜色.如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式,官方网站是完全没有具体的解释. 而且,官方网站的超级链接代码杂糅着许多没有用的参数. 笔者

  • bootstrap导航栏、下拉菜单、表单的简单应用实例解析

    制作效果图如下: 代码如下(以后做东西可以改改就能直接用): <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

  • Bootstrap中表单控件状态(验证状态)

    在制作表单时,难免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果. 1..has-warning:警告状态(黄色) 2..has-error:错误状态(红色) 3..has-success:成功状态(绿色) 使用的时候只需要在form-group容器上对应添加状态类名. <form role="form"> <div class="form-group has-success"> <label c

  • Bootstrap实现响应式导航栏效果

    为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮.这些会切换

  • Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    本文主要包括三大方面,大家仔细学习. 1.导航栏中的表单 导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class.这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为.使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默

  • 妙用Bootstrap的 popover插件实现校验表单提示功能

    最近的项目,用Bootstrap比较多.浏览Bootstrap文档,发现 popover 插件特别适合做表单校验出错的提示. 因为使的非常频繁,最近把它封住下,做成 jQuery的插件. 通过 本插件,在 html标签中 定义好 data-vaild="校验正则" data-errmsg="错误信息即可".为什么 要把 校验规则 写到 html 标签中呢?因为 我还用它做了 后台 的校验规则(后台没用Node,现在用的ASP,忙完专门再发文写下原理). <in

  • BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q

  • Bootstrap实现默认导航栏效果

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 role="

  • Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

  • bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)

    本文算是bootstrap学习使用的年底大总结,供大家参考,具体内容如下 bootstrap框架 BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢. <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equi

  • 基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法

    基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用,在手机浏览器中能弹出下拉列表,却不能选择列表中的菜单项,通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决,替换后并不能解决.(红米手机UC浏览器不支持,小米手机UC浏览器正常,其他暂时未测试) jquery:v1.11.2 bootstrap:v3.3.4 以下为前台页面代码: <div class="input-group">

随机推荐