Bootstrap 表单验证formValidation 实现远程验证功能


Posted in Javascript onMay 17, 2017

最近项目用到了一个很强大的表单验证。记录下。官方地址:http://formvalidation.io/api/

还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动。不用再去Bootstrap官网下载。

向上效果:

Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能 

先导入资源:

<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="dist/css/formValidation.css" rel="external nofollow" /
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="dist/js/formValidation.js"></script>
  <script type="text/javascript" src="dist/js/framework/bootstrap.js"></script>
  <script type="text/javascript" src="dist/js/language/zh_CN.js"></script>

html:

<form id="defaultForm" class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-3 control-label">Full name</label>
    <div class="col-xs-5">
      <input type="text" class="form-control" name="boxId" />
    </div>
  </div>
</form>

下面是验证代码;

$('#defaultForm').formValidation({
 message: '此值无效', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, locale: 'zh_CN', fields:{
    boxId:{
      verbose: false,//代表验证按顺序验证。验证成功才会下一个(验证成功才会发最后一个remote远程验证)
      validators: {
        notEmpty: {
          message: '这是必填字段'
        },
        digits: {
          message: '值不是数字'
        },
        stringLength: {
          min: 16,
          message:'必须为16个数字'
        },
        remote: {
           type: 'POST',
          url: '/box/unique',
          message: '此设备号已存在',
          delay: 2000
        }
      }
    },
        onSuccess:function(){
    //点击提交表单。表单所有都验证成功
       }
    });

后台返回

{ “valid”: true }//通过验证 
或 
{ “valid”: false }//不通过—》 ‘此设备号已存在',

效果图;

Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能

Bootstrap 表单验证formValidation 实现远程验证功能

Bootstrap 表单验证formValidation 实现远程验证功能

以上所述是小编给大家介绍的Bootstrap 表单验证formValidation 实现远程验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 #Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 #Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 #Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 #Javascript
vue之nextTick全面解析
May 17 #Javascript
Vue.js学习教程之列表渲染详解
May 17 #Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 #Javascript
You might like
PHP的FTP学习(四)
2006/10/09 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
详解Django中的form库的使用
2015/07/18 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
linux下进程间通信的方式
2013/01/23 面试题
毕业生自我鉴定
2013/12/04 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
副处级干部考察材料
2014/05/17 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android