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 相关文章推荐
jquery一般方法介绍 入门参考
Jun 21 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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动态添加url查询参数的方法
2015/04/14 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
React简单介绍
2017/05/24 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
wxPython的安装与使用教程
2018/08/31 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Pycharm github配置实现过程图解
2020/10/13 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
delegate与普通函数的区别
2014/01/22 面试题
UNIX文件系统分类
2014/11/11 面试题
电子商务专业毕业生自荐书
2014/06/22 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
行政处罚决定书
2015/06/24 职场文书
新年寄语2016
2015/08/17 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
python神经网络ResNet50模型
2022/05/06 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android