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里的条件判断
Feb 27 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python实现注册登录系统
2017/08/08 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
博士学位自我鉴定范文
2013/12/26 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
开业典礼主持词
2014/03/21 职场文书
户外活动总结范文
2014/04/30 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
离婚协议书范文2015
2015/01/26 职场文书
人事专员岗位职责
2015/02/03 职场文书
目标责任书格式范文
2015/05/11 职场文书
新郎新娘致辞
2015/07/31 职场文书
2019教师的学习计划
2019/06/25 职场文书