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

 更新时间:2017年05月17日 16:08:34   作者:北冥没有鱼  
这篇文章主要介绍了Bootstrap 表单验证formValidation 实现远程验证功能,需要的朋友可以参考下

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

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

向上效果:

这里写图片描述
这里写图片描述
这里写图片描述 

先导入资源:

<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 实现远程验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript实现左右缓动动画函数

    javascript实现左右缓动动画函数

    这篇文章主要为大家详细介绍了javascript实现左右缓动动画函数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS改变页面颜色源码分享

    JS改变页面颜色源码分享

    本篇文章是JS的一个网页制作小技巧,应用在很多地方,通过JS改变HTML页面的颜色,有兴趣的学习下。
    2018-02-02
  • 微信小程序防止多次点击跳转(函数节流)

    微信小程序防止多次点击跳转(函数节流)

    这篇文章主要介绍了微信小程序防止多次点击跳转问题(函数节流),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 跟我学习javascript的异步脚本加载

    跟我学习javascript的异步脚本加载

    跟我学习javascript的异步脚本加载,告诉大家如何使自己的站点更快捷,以及最简单的方法 利用什么样的工具达到预期效果,想一探究竟的朋友可以参考一下这篇文章。
    2015-11-11
  • js禁止Backspace键使浏览器后退的实现方法

    js禁止Backspace键使浏览器后退的实现方法

    下面小编就为大家带来一篇js禁止Backspace键使浏览器后退的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js剪切板应用clipboardData实例解析

    js剪切板应用clipboardData实例解析

    这篇文章主要为大家详细介绍了js剪切板应用clipboardData实例,并分享了四种实现方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • javascript中验证大写字母、数字和中文

    javascript中验证大写字母、数字和中文

    本文为大家介绍下使用javascript验证大写字母小写字母,数字和中文,具体示例如下
    2014-01-01
  • Selenium执行JavaScript脚本的方法示例

    Selenium执行JavaScript脚本的方法示例

    这篇文章主要介绍了Selenium执行JavaScript脚本的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • js中net::ERR_FILE_NOT_FOUND报错的解决

    js中net::ERR_FILE_NOT_FOUND报错的解决

    本文主要介绍了js中net::ERR_FILE_NOT_FOUND报错的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 微信小程序前后端数据交互的详细图文教程

    微信小程序前后端数据交互的详细图文教程

    这篇文章主要给大家介绍了关于微信小程序前后端数据交互的相关资料,通过小程序向后端发送请求,然后后端从数据库获取车源和求购的数量反馈给小程序,最后将这两个数据显示出来,需要的朋友可以参考下
    2022-10-10

最新评论