使用BootstrapValidator怎么實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能

這篇文章給大家介紹使用BootstrapValidator怎么實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)于2013年成立，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元玉泉做網(wǎng)站,已為上家服務(wù),為玉泉各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

<!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="請(qǐng)輸入賬號(hào)" name="username">
 </div><!-- form-group -->
 <div class="form-group">
 <input type="password" class="form-control" placeholder="請(qǐng)輸入密碼" 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="驗(yàn)證碼" 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">還沒(méi)有注冊(cè)賬號(hào)？ <a href="page-signup.html" class="tx-info">注冊(cè)</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ī)驗(yàn)證碼
 draw(show_num);
 
 /**點(diǎn)擊驗(yàn)證碼重新生成*/
 $("#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的對(duì)象，演員
 var context = canvas.getContext("2d");//獲取到canvas畫(huà)圖的環(huán)境，演員表演的舞臺(tái)
 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ù)組的長(zhǎng)度
 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ī)的一個(gè)內(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++) { //驗(yàn)證碼上顯示線條
 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++) { //驗(yàn)證碼上顯示小點(diǎn)
 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();
 }
 //為了測(cè)試方便不用每次都輸入驗(yàn)證碼
 //$("#checkCodeYZM").val(show_num.join(""));
 }
 
 
 $(document).ready(function () {
 //當(dāng)提交時(shí)進(jìn)行表單驗(yà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: '用戶(hù)名驗(yàn)證失敗',
  validators: {
  notEmpty: {
  message: '用戶(hù)名不能為空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用戶(hù)名必須大于6位且不得超過(guò)30位字符'
  },
  }
 },
 password: {
  message: '密碼驗(yàn)證失敗',
  validators: {
  notEmpty: {
  message: '密碼不能為空'
  },stringLength: {
  min: 8,
  max: 20,
  message: '密碼必須大于8位且不得超過(guò)20位字符'
  },
  }
 },
 checkCodeYZM: {
  message: '驗(yàn)證碼驗(yàn)證失敗',
  validators: {
  notEmpty: {
  message: '驗(yàn)證碼不能為空'
  }
  }
 }
 }
 });
 });
</script>
</body>
</html>

關(guān)于使用BootstrapValidator怎么實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前文章：使用BootstrapValidator怎么實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能
當(dāng)前URL：http://bm7419.com/article26/jceccg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、商城網(wǎng)站、網(wǎng)站策劃、App開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容