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 相关文章推荐
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php实例分享之二维数组排序
2014/05/15 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
用Python实现读写锁的示例代码
2018/11/05 Python
pybind11在Windows下的使用教程
2019/07/04 Python
利用python实现AR教程
2019/11/20 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
幼儿教师国培感言
2014/02/19 职场文书
会计工作总结范文2014
2014/12/23 职场文书
员工安全责任协议书
2016/03/22 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python