快捷導(dǎo)航

BootstrapValidator實現(xiàn)表單驗證功能

更新時間：2019年11月08日 08:34:35 作者：Zartillery

這篇文章主要為大家詳細(xì)介紹了BootstrapValidator實現(xiàn)表單驗證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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文件導(dǎo)入，配合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 = [];//將要生成的隨機(jī)驗證碼
 draw(show_num);
 
 /**點擊驗證碼重新生成*/
 $("#canvas").on('click', function () {
 draw(show_num);
 });
 
 function randomColor() {//得到隨機(jī)的顏色值==>把顏色設(shè)置為黑色，看的清楚
 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畫圖的環(huán)境，演員表演的舞臺
 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;//獲取到數(shù)組的長度
 for (var i = 0; i <= 3; i++) {
 var j = Math.floor(Math.random() * aLength);//獲取到隨機(jī)的索引值
 var deg = Math.random() * 30 * Math.PI / 180;//產(chǎn)生0~30之間的隨機(jī)弧度
 var txt = aCode[j];//得到隨機(jī)的一個內(nèi)容
 show_num[i] = txt.toLowerCase();
 var x = 10 + i * 20;//文字在canvas上的x坐標(biāo)
 var y = 20 + Math.random() * 8;//文字在canvas上的y坐標(biāo)
 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 () {
 //當(dāng)提交時進(jìn)行表單驗證 代碼內(nèi)容容易看懂 這里不進(jìn)行注解解釋
 $('#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>

下面看看測試效果：

當(dāng)不輸入內(nèi)容直接提交時，提示不能為空：