BootstrapValidator实现表单验证功能


Posted in Javascript onNovember 08, 2019

BootstrapValidator是一款非常好用的表单验证插件,通过友好的错误提示能增加用户体验。

bootstrapvalidator源码下载

既然是表单验证,那我们最常用的就是用户登录界面,下面来看看测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 <!-- Twitter -->
 <meta name="twitter:site" content="@themepixels">
 <meta name="twitter:creator" content="@themepixels">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="Starlight">
 <meta name="twitter:description" content="Premium Quality and Responsive UI for Dashboard.">
 <meta name="twitter:image" content="http://themepixels.me/starlight/img/starlight-social.png">
 
 <!-- Facebook -->
 <meta property="og:url" content="http://themepixels.me/starlight">
 <meta property="og:title" content="Starlight">
 <meta property="og:description" content="Premium Quality and Responsive UI for Dashboard.">
 
 <meta property="og:image" content="http://themepixels.me/starlight/img/starlight-social.png">
 <meta property="og:image:secure_url" content="http://themepixels.me/starlight/img/starlight-social.png">
 <meta property="og:image:type" content="image/png">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="600">
 
 <!-- Meta -->
 <meta name="description" content="Premium Quality and Responsive UI for Dashboard.">
 <meta name="author" content="ThemePixels">
 
 <title>欢迎使用</title>
 
 <!-- vendor css -->
 <link href="../lib/font-awesome/css/font-awesome.css" rel="stylesheet">
 <link href="../lib/Ionicons/css/ionicons.css" rel="stylesheet">
 
 
 
 
 <!-- Starlight CSS -->
 <link rel="stylesheet" href="../css/starlight.css" >
 
 <!-- 将下载好的BootstrapValidator js,css文件导入,配合bootstrap插件使用 -->
 <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css" />
 <link rel="stylesheet" href="../dist/css/bootstrapValidator.css" />
 <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/bootstrapValidator.js"></script>
</head>
 
<body>
 
<div class="d-flex align-items-center justify-content-center bg-sl-primary ht-100v">
 
 <div class="login-wrapper wd-300 wd-xs-350 pd-25 pd-xs-40 bg-white">
 <div class="signin-logo tx-center tx-24 tx-bold tx-inverse"><span class="tx-info tx-normal">欢迎使用</span>
 </div>
 <form id="form">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入账号" name="username">
 </div><!-- form-group -->
 <div class="form-group">
 <input type="password" class="form-control" placeholder="请输入密码" name="password">
 <a href="" class=" rel="external nofollow" tx-info tx-12 d-block mg-t-10">忘记密码?</a>
 </div><!-- form-group -->
 <div class="form-group">
 <input type="text" id="checkCodeYZM" name="checkCodeYZM" placeholder="验证码" class="form-control">
 <div class="code" class="form-control">
  <canvas id="canvas" width="100" height="36"></canvas>
 </div>
 </div>
 <button type="submit" class="btn btn-info btn-block">登录</button>
 
 <div class="mg-t-60 tx-center">还没有注册账号? <a href="page-signup.html" class="tx-info">注册</a></div>
 </form>
 </div><!-- login-wrapper -->
</div><!-- d-flex -->
 
<script src="../lib/popper.js/popper.js"></script>
<script src="../lib/bootstrap/bootstrap.js"></script>
 
<script>
 var show_num = [];//将要生成的随机验证码
 draw(show_num);
 
 /**点击验证码重新生成*/
 $("#canvas").on('click', function () {
 draw(show_num);
 });
 
 function randomColor() {//得到随机的颜色值==>把颜色设置为黑色,看的清楚
 var r = Math.floor(0);
 var g = Math.floor(0);
 var b = Math.floor(0);
 return "rgb(" + r + "," + g + "," + b + ")";
 }
 
 function draw(show_num) {
 var canvas_width = $('#canvas').width();
 var canvas_height = $('#canvas').height();
 var canvas = document.getElementById("canvas");//获取到canvas的对象,演员
 var context = canvas.getContext("2d");//获取到canvas画图的环境,演员表演的舞台
 canvas.width = canvas_width;
 canvas.height = canvas_height;
 var sCode = "1,2,3,4,5,6,7,8,9,0";
 var aCode = sCode.split(",");
 var aLength = aCode.length;//获取到数组的长度
 for (var i = 0; i <= 3; i++) {
 var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
 var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
 var txt = aCode[j];//得到随机的一个内容
 show_num[i] = txt.toLowerCase();
 var x = 10 + i * 20;//文字在canvas上的x坐标
 var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
 context.font = "bold 26px 楷体";
 
 context.translate(x, y);
 context.rotate(deg);
 
 context.fillStyle = randomColor();
 context.fillText(txt, 0, 0);
 
 context.rotate(-deg);
 context.translate(-x, -y);
 
 }
 
 for (var i = 0; i <= 5; i++) { //验证码上显示线条
 context.strokeStyle = randomColor();
 context.beginPath();
 context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
 context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
 context.stroke();
 }
 for (var i = 0; i <= 30; i++) { //验证码上显示小点
 context.strokeStyle = randomColor();
 context.beginPath();
 var x = Math.random() * canvas_width;
 var y = Math.random() * canvas_height;
 context.moveTo(x, y);
 context.lineTo(x + 1, y + 1);
 context.stroke();
 }
 //为了测试方便不用每次都输入验证码
 //$("#checkCodeYZM").val(show_num.join(""));
 }
 
 
 $(document).ready(function () {
 //当提交时进行表单验证 代码内容容易看懂 这里不进行注解解释
 $('#form').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: 6,
  max: 30,
  message: '用户名必须大于6位且不得超过30位字符'
  },
  }
 },
 password: {
  message: '密码验证失败',
  validators: {
  notEmpty: {
  message: '密码不能为空'
  },stringLength: {
  min: 8,
  max: 20,
  message: '密码必须大于8位且不得超过20位字符'
  },
  }
 },
 checkCodeYZM: {
  message: '验证码验证失败',
  validators: {
  notEmpty: {
  message: '验证码不能为空'
  }
  }
 }
 }
 });
 });
</script>
</body>
</html>

下面看看测试效果:

当不输入内容直接提交时,提示不能为空:

BootstrapValidator实现表单验证功能

当输入字符不符合规定位数时,提示:

BootstrapValidator实现表单验证功能

可根据需求继续添加表单验证

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

以上就是关于本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 #Javascript
Vue修改项目启动端口号方法
Nov 07 #Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 #Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 #Javascript
浅谈Vue中render中的h箭头函数
Nov 07 #Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 #Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 #Javascript
You might like
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php的debug相关函数用法示例
2016/07/11 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
.net面试题
2016/09/17 面试题
小区停车场管理制度
2014/01/27 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
贷款委托书怎么写
2014/08/02 职场文书
离婚协议书范文2014
2014/10/16 职场文书
初中信息技术教学计划
2015/01/22 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
集结号观后感
2015/06/08 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python