基于BootstrapValidator的Form表单验证(24)


Posted in Javascript onDecember 12, 2016

Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现。对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果。

0x01 引入BootstrapValidator

官网:BootstrapValidator,作为一个纯粹的使用者,我们可以在上面的链接处下载相关文件并引入,也可以利用CDN方式引入:

<link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

0x02 用户注册实例

下面使用一个用户注册的实例,来总结BootstrapValidator的基本使用方法(其中的JS和CSS文件的引入,请根据自己的实际位置进行调整):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>用户注册</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../../css/bootstrap.min.css" rel="stylesheet">
 <link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../../js/bootstrap.min.js"></script>
 <script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="container col-lg-3 col-lg-offset-3">
 <div class="page-header">
  <h3>用户注册</h3>
 </div>
 <div>
  <form id="registerForm" method="POST" class="form-horizontal" action="用户注册.html">
   <div class="form-group">
    <!--注册的用户名-->
    <label class="control-label" for="username">*请输入注册用户名:</label>
    <input type="text" class="form-control" placeholder="请输入注册用户名" name="username" id="username">
   </div>
   <div class="form-group">
    <!--注册密码-->
    <label class="control-label" for="password">*请输入注册密码:</label>
    <input type="password" class="form-control" placeholder="请输入注册密码" name="password" id="password">
   </div>
   <div class="form-group">
    <!--确认密码-->
    <label class="control-label" for="repassword">*请输入确认密码:</label>
    <input type="password" class="form-control" placeholder="请输入确认密码" name="repassword" id="repassword">
   </div>
   <div class="form-group">
    <label class="control-label" for="phone">*请输入手机号码:</label>
    <input type="text" class="form-control" placeholder="请输入手机号码" name="phone" id="phone">
   </div>
   <div class="form-group">
    <label class="control-label" for="email">*请输入电子邮箱:</label>
    <input type="text" class="form-control" placeholder="请输入电子邮箱" name="email" id="email">
   </div>
   <div class="form-group">
    <label class="control-label" for="inviteCode">*请输入邀请码:</label>
    <input type="text" class="form-control" placeholder="请输入邀请码" name="inviteCode" id="inviteCode">
   </div>
   <div class="form-group">
    <button type="submit" class="btn btn-primary form-control">提交注册</button>
   </div>
  </form>
 </div>
</div>
<script>
 $(function () {
  <!--数据验证-->
  $("#registerForm").bootstrapValidator({
   message:'This value is not valid',
//   定义未通过验证的状态图标
   feedbackIcons: {/*输入框不同状态,显示图片的样式*/
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
   },
//   字段验证
   fields:{
//    用户名
    username:{
     message:'用户名非法',
     validators:{
//      非空
      notEmpty:{
       message:'用户名不能为空'
      },
//      限制字符串长度
      stringLength:{
       min:3,
       max:20,
       message:'用户名长度必须位于3到20之间'
      },
//      基于正则表达是的验证
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'用户名由数字字母下划线和.组成'
      }
     }
    },

//    密码
    password:{
     message:'密码非法',
     validators:{
      notEmpty:{
       message:'密码不能为空'
      },
//      限制字符串长度
      stringLength:{
       min:3,
       max:20,
       message:'密码长度必须位于3到20之间'
      },
//      相同性检测
      identical:{
//       需要验证的field
       field:'password',
       message:'两次密码输入不一致'
      },
//      基于正则表达是的验证
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'密码由数字字母下划线和.组成'
      }
     }
    },

    //    确认密码
    repassword:{
     message:'密码非法',
     validators:{
      notEmpty:{
       message:'密码不能为空'
      },
//      限制字符串长度
      stringLength:{
       min:3,
       max:20,
       message:'密码长度必须位于3到20之间'
      },
//      相同性检测
      identical:{
//       需要验证的field
       field:'password',
       message:'两次密码输入不一致'
      },
//      基于正则表达是的验证
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'密码由数字字母下划线和.组成'
      }
     }
    },

//    电子邮箱
    email:{
     validators:{
      notEmpty:{
       message:'邮箱地址不能为空'
      },
      emailAddress:{
       message:'请输入正确的邮箱地址'
      }
     }
    },

//    手机号码
    phone:{
     validators:{
      notEmpty:{
       message:'手机号码不能为空'
      },
      stringlength:{
       min:11,
       max:11,
       message:'请输入11位手机号码'
      },
      regexp:{
       regexp:/^1[3|5|8]{1}[0-9]{9}$/,
       message:'请输入正确的手机号码'
      }
     }
    },

//    邀请码
    inviteCode:{
     validators:{
      notEmpty:{
       message:'邀请码不能为空'
      },
      stringlength:{
       min:9,
       max:9,
       message:'请输入9位邀请码'
      },
      regexp:{
       regexp:/^[\w]{8}$/,
       message:'邀请码由数字和字母组成'
      }
     }
    }
   }
  })
 })
</script>
</body>
</html>

验证效果如下:

基于BootstrapValidator的Form表单验证(24)

0x03 后记

在实际应用中,可能还会遇到类似Ajax提交验证的问题,处理过程是类似的,以后再结合实际的应用来讲这个问题。
类似BootstrapValidator这种基于JS来做验证的过程只是客户端验证,只是为了提高用户体验,并不能保证提交数据的安全性,后端开发者还要做相应的后台验证。

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

Javascript 相关文章推荐
jQuery ui插件的使用方法代码实例
May 08 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
JS获取时间的方法
Jan 21 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 #Javascript
js原生之焦点图转换加定时器实例
Dec 12 #Javascript
IntersectionObserver API 详解篇
Dec 11 #Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 #Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 #Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 #Javascript
jquery滚动条插件(可以自定义)
Dec 11 #Javascript
You might like
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
js微信支付实现代码
2016/12/22 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
基于python实现学生管理系统
2018/10/17 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
pandas按条件筛选数据的实现
2021/02/20 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
NET程序员上机面试题
2015/05/23 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python