使用BootStrapValidator完成前端输入验证

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

怎么样,还比较和谐把,当然你也可以修改默认样式,让它的显示方式更加美观。

下面来说说他的用法:

1.下载BootStrapValidator

你可以点击BootStrapValidator官方下载地址来下载它。

2.下载后的目录结构

下载完成后,如果是全部文件的化,目录结构如下:

其中可以直接在项目中使用的文件都放在dist文件夹中,使用的实例放在demo中,它所依赖的BootStrap以及Jquery文件都放在Vendor文件夹中。如果您项目的BootStrap版本和它所使用的版本不一致,建议使用它的BootStrap文件,否则可能会导致显示效果出问题(困扰了我好几天,终于解决了),下面看看怎么用:

3.用法

没什么说的,直接上代码:

(1)库引用

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

主要引用了BootStrap的js和css文件,以及BootStrapValidator的js和CSS文件。以上是根据我的项目结构来引用的,当然您可以按照自己的想法来建立目录。

(2)HTML部分

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

(3)Jquery验证部分代码

$(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:'请输入密码'
 }
 }
 }
 },
 });
 });

好了,到这里就写完了,当然这里只是一些基本用法,它还有其他更强大的功能,比如异步验证(和服务器端通信验证),网上教程很多,这里就不再赘述。希望本文对您有所帮助!

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

(0)

相关推荐

  • BootStrap Validator使用注意事项(必看篇)

    如果你使用的前端框架是bootstrap,那么前端验证框架就不必考虑了,bootstrapvalidator是最好的选择,它和bootstrap的结合最完美,不过要注意版本的问题,针对bootstrap2和bootstrap3有不同的版本. 下面是我遇到的两个注意事项,自己做个笔记: 1.为每个要验证的表单元素添加name属性 例如: <div class="form-group"> <input type="text" placeholder=&

  • bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

    一.前言 使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段.为了更加直观的展现问题,上图一张. 可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段.so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把

  • 使用bootstrap validator的remote验证代码经验分享(推荐)

    这里需要说一下,bootstrapvalidator的帮助文档写的比较简单,对于remote验证器的说明更是如此,在经历多方测试之后才明白如何使用这个验证器. 一个典型的ajax验证代码如下: 服务端验证代码(使用spring mvc)如下: /* * 返回String类型的结果 * 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式为{"valid",true}) */ @RequestMapping(value = "/chec

  • BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享(推荐) 一.准备工作 1.你的网站环境中要有 BootStrap,中文网地址:http://www.bootcss.com/ 2.下载BootStrap Validator相关材料,地址:http://bv.doc.javake.cn/ 当然,如果你不想一个

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)

    本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

  • BootStrapValidator初使用教程详解

    bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. bootstrapValidator的github地址 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jQuery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js 以上这些都是必须的. 先上个简单的例子,只要导入

  • 使用bootstrapValidator插件进行动态添加表单元素并校验

    一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV

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

    BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起.下面直接上图,看看完成后的结果: 怎么样,还比较和谐把,当然你也可以修改默认样式,让它的显示方式更加美观. 下面来说说他的用法: 1.下载BootStrapValidator 你可以点击BootStrapValidator官方下载地址来下载它. 2.下载后的目录结构 下载完成后,如果是全部文件的化,目录结构如下: 其中可以直接在项目

  • 基于jQuery 实现bootstrapValidator下的全局验证

    BootstrapValidator 是一款专门针对Boostrap v3的表单检验jQuery插件,能够实现众多常用的检验功能,并且易于扩展,还支持中文!对于bootstrap用户来说能够开箱即用. 前置: 引入jQuery.bootstrap.bootstrapValidator 问题描述: 项目中要求所有的表单输入框中都不能输入&符号.没有在bootstrap中找到有方法可用,只能自己动手了 思路: 使用正则. 分两种情况,第一种,如果输入框有自身的正则验证则不用去管(一般来说使用正则验证

  • WebApiClient的接口输入验证方法

    1. 文章目的 随着 WebApiClient的不断完善,越来越多开发者选择WebApiClient替换原生的HttpClient,本文将介绍WebApiClient的接口参数输入有效性验证的新特性. 2.DataAnnotations介绍 在 asp.net mvc 服务端编程中,我们在创建模型的时候,使用System.ComponentModel.DataAnnotations相关的验证特性,配合mvc框架,可以做前端和后端双向输入验证的效果. public class UserInfo {

  • AngularJS 输入验证详解及实例代码

    AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识. AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 注意: 客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的. 应用代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g

  • AngularJS表单和输入验证实例

    AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 注意:客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的. 1.HTML 控件 以下 HTML input 元素被称为 HTML 控件:input 元素.select 元素.button 元素.textarea 元素. 2.HTML 表单 AngularJS 表单是输入控件的集合.HTML 表单通常与 HTML 控件同时存在. <!DOCTYPE html> <html> <

  • javascript设计模式--策略模式之输入验证

    策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align:

  • Struts2数据输入验证教程详解

    一.前言 1.1.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我们怎么确定类型转换后的数据,是我们想要的数据呢?这里有点绕.你可以这样想:一个成年男子年龄是18岁,你现在想要得到18这个数据,但是,用户输入32,经过类型转换也是对的,但是数据不是你想要的.这时候,我们要怎么办?所以输入验证在这里就有用处了. 类型转换和输入验证的关系是:类型转换是输入验证的前提,

  • PyQt5实现QLineEdit正则表达式输入验证器

    本文主要介绍了QLineEdit正则表达式输入验证器,分享给大家,具体如下: from PyQt5 import QtWidgets, QtCore, QtGui, Qt import re ############## QLineEdit正则表达式输入验证器 class LineEditRegExpValidator(QtGui.QValidator): ''' # 默认为科学计数法输入验证器 用法 SciNotValidator = LineEditRegExpValidator() # 创

  • Python使用Tkinter GUI实现输入验证功能

    目录 输入验证 1.Tkinter 验证简介 1.1 validate命令 1.2 validatecommand 1.3 invalidcommand 2.完整示例 输入验证 在本文中,将介绍如何使用 Tkinter 验证来验证用户输入. 1.Tkinter 验证简介 Tkinter 验证依赖于可用于任何输入小部件(例如 Entry 小部件)的三个选项: validate:指定哪种类型的事件将触发验证. validatecommand:检查数据是否有效 invalidcommand:当数据无效

  • BootstrapValidator实现表单验证功能

    BootstrapValidator是一款非常好用的表单验证插件,通过友好的错误提示能增加用户体验. bootstrapvalidator源码下载 既然是表单验证,那我们最常用的就是用户登录界面,下面来看看测试代码: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <m

随机推荐