快捷導(dǎo)航

基于BootstrapValidator的Form表單驗(yàn)證(24)

更新時(shí)間：2016年12月12日 08:36:26 作者：kikay

這篇文章主要為大家詳細(xì)介紹了基于BootstrapValidator的Form表驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Form表單進(jìn)行數(shù)據(jù)驗(yàn)證是十分必要的，我們可以自己寫JS腳本或者使用JQuery Validate 插件來實(shí)現(xiàn)。對(duì)于Bootstrap而言，利用BootstrapValidator來做Form表單驗(yàn)證是個(gè)相當(dāng)不錯(cuò)的選擇，兩者完全兼容，我們也不用去關(guān)注CSS樣式等美工效果。

0x01 引入BootstrapValidator

官網(wǎng)：BootstrapValidator，作為一個(gè)純粹的使用者，我們可以在上面的鏈接處下載相關(guān)文件并引入，也可以利用CDN方式引入：

0x02 用戶注冊(cè)實(shí)例

下面使用一個(gè)用戶注冊(cè)的實(shí)例，來總結(jié)BootstrapValidator的基本使用方法（其中的JS和CSS文件的引入，請(qǐng)根據(jù)自己的實(shí)際位置進(jìn)行調(diào)整）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>用戶注冊(cè)</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../../css/bootstrap.min.css" rel="stylesheet">
 <link  rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../../js/bootstrap.min.js"></script>
 <script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="container col-lg-3 col-lg-offset-3">
 <div class="page-header">
  <h3>用戶注冊(cè)</h3>
 </div>
 <div>
  <form id="registerForm" method="POST" class="form-horizontal" action="用戶注冊(cè).html">
   <div class="form-group">
    <!--注冊(cè)的用戶名-->
    <label class="control-label" for="username">*請(qǐng)輸入注冊(cè)用戶名:</label>
    <input type="text" class="form-control" placeholder="請(qǐng)輸入注冊(cè)用戶名" name="username" id="username">
   </div>
   <div class="form-group">
    <!--注冊(cè)密碼-->
    <label class="control-label" for="password">*請(qǐng)輸入注冊(cè)密碼:</label>
    <input type="password" class="form-control" placeholder="請(qǐng)輸入注冊(cè)密碼" name="password" id="password">
   </div>
   <div class="form-group">
    <!--確認(rèn)密碼-->
    <label class="control-label" for="repassword">*請(qǐng)輸入確認(rèn)密碼:</label>
    <input type="password" class="form-control" placeholder="請(qǐng)輸入確認(rèn)密碼" name="repassword" id="repassword">
   </div>
   <div class="form-group">
    <label class="control-label" for="phone">*請(qǐng)輸入手機(jī)號(hào)碼:</label>
    <input type="text" class="form-control" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" name="phone" id="phone">
   </div>
   <div class="form-group">
    <label class="control-label" for="email">*請(qǐng)輸入電子郵箱:</label>
    <input type="text" class="form-control" placeholder="請(qǐng)輸入電子郵箱" name="email" id="email">
   </div>
   <div class="form-group">
    <label class="control-label" for="inviteCode">*請(qǐng)輸入邀請(qǐng)碼:</label>
    <input type="text" class="form-control" placeholder="請(qǐng)輸入邀請(qǐng)碼" name="inviteCode" id="inviteCode">
   </div>
   <div class="form-group">
    <button type="submit" class="btn btn-primary form-control">提交注冊(cè)</button>
   </div>
  </form>
 </div>
</div>
<script>
 $(function () {
  <!--數(shù)據(jù)驗(yàn)證-->
  $("#registerForm").bootstrapValidator({
   message:'This value is not valid',
//   定義未通過驗(yàn)證的狀態(tài)圖標(biāo)
   feedbackIcons: {/*輸入框不同狀態(tài)，顯示圖片的樣式*/
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
   },
//   字段驗(yàn)證
   fields:{
//    用戶名
    username:{
     message:'用戶名非法',
     validators:{
//      非空
      notEmpty:{
       message:'用戶名不能為空'
      },
//      限制字符串長度
      stringLength:{
       min:3,
       max:20,
       message:'用戶名長度必須位于3到20之間'
      },
//      基于正則表達(dá)是的驗(yàn)證
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'用戶名由數(shù)字字母下劃線和.組成'
      }
     }
    },

//    密碼
    password:{
     message:'密碼非法',
     validators:{
      notEmpty:{
       message:'密碼不能為空'
      },
//      限制字符串長度
      stringLength:{
       min:3,
       max:20,
       message:'密碼長度必須位于3到20之間'
      },
//      相同性檢測
      identical:{
//       需要驗(yàn)證的field
       field:'password',
       message:'兩次密碼輸入不一致'
      },
//      基于正則表達(dá)是的驗(yàn)證
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'密碼由數(shù)字字母下劃線和.組成'
      }
     }
    },

    //    確認(rèn)密碼
    repassword:{
     message:'密碼非法',
     validators:{
      notEmpty:{
       message:'密碼不能為空'
      },
//      限制字符串長度
      stringLength:{
       min:3,
       max:20,
       message:'密碼長度必須位于3到20之間'
      },
//      相同性檢測
      identical:{
//       需要驗(yàn)證的field
       field:'password',
       message:'兩次密碼輸入不一致'
      },
//      基于正則表達(dá)是的驗(yàn)證
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'密碼由數(shù)字字母下劃線和.組成'
      }
     }
    },

//    電子郵箱
    email:{
     validators:{
      notEmpty:{
       message:'郵箱地址不能為空'
      },
      emailAddress:{
       message:'請(qǐng)輸入正確的郵箱地址'
      }
     }
    },

//    手機(jī)號(hào)碼
    phone:{
     validators:{
      notEmpty:{
       message:'手機(jī)號(hào)碼不能為空'
      },
      stringlength:{
       min:11,
       max:11,
       message:'請(qǐng)輸入11位手機(jī)號(hào)碼'
      },
      regexp:{
       regexp:/^1[3|5|8]{1}[0-9]{9}$/,
       message:'請(qǐng)輸入正確的手機(jī)號(hào)碼'
      }
     }
    },

//    邀請(qǐng)碼
    inviteCode:{
     validators:{
      notEmpty:{
       message:'邀請(qǐng)碼不能為空'
      },
      stringlength:{
       min:9,
       max:9,
       message:'請(qǐng)輸入9位邀請(qǐng)碼'
      },
      regexp:{
       regexp:/^[\w]{8}$/,
       message:'邀請(qǐng)碼由數(shù)字和字母組成'
      }
     }
    }
   }
  })
 })
</script>
</body>
</html>

驗(yàn)證效果如下：

0x03 后記

在實(shí)際應(yīng)用中，可能還會(huì)遇到類似Ajax提交驗(yàn)證的問題，處理過程是類似的，以后再結(jié)合實(shí)際的應(yīng)用來講這個(gè)問題。
類似BootstrapValidator這種基于JS來做驗(yàn)證的過程只是客戶端驗(yàn)證，只是為了提高用戶體驗(yàn)，并不能保證提交數(shù)據(jù)的安全性，后端開發(fā)者還要做相應(yīng)的后臺(tái)驗(yàn)證。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: