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 相关文章推荐
js获取视频时长代码
Apr 10 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
js实现盒子拖拽动画效果
Aug 09 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中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
基于Python实现文件大小输出
2016/01/11 Python
Python编码类型转换方法详解
2016/07/01 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
django_orm查询性能优化方法
2018/08/20 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python实现简单的学生管理系统
2021/02/22 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
电台实习生求职信
2014/02/25 职场文书
安全生产目标责任书
2014/04/14 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
教你一步步实现一个简易promise
2021/11/02 Javascript