2. 程式人生 > >基於BootstrapValidator的資料驗證

基於BootstrapValidator的資料驗證

阿新 • • 發佈：2019-02-02

零. 寫在前面

做web開發，經常需要使用到表單驗證，作者本人一開始也是自己寫各種驗證，最近接觸到BootstrapValidator，覺得非常好用，介面友好，使用方便，與Bootstrap完美相容，堪稱前端資料驗證神器。
那麼，今天，我們就來了解一下如何使用BootstrapValidator做表單驗證吧！
首先，使用BootstrapValidator需要從GitHub的BootstrapValidator專案頁下載檔案包。

一. 需要引入的檔案

樣式表(css)檔案：
bootstrap.min.css
bootstrapValidator.min.css
js指令碼檔案:


jquery-1.10.2.min.js
bootstrap.min.js

1.1 在< head >標籤中引入css檔案

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrapValidator.min.css" rel="stylesheet">

1.2 在< /body >前引入js檔案

    <script type="text/javascript" src="js/bootstrap.min.js"
 
></script>
    <script src="js/bootstrapValidator.min.js"></script>

二. 登入驗證Demo

2.1使用Bootstrap寫出介面

登入介面效果圖如下：
這裡寫圖片描述

登入介面程式碼如下：

<body>
<div class="container">
    <div class="col-md-12">
        <h2> <i class="glyphicon glyphicon-education" ></i>
 
&nbsp;高校學生資訊管理系統<span class="beta">&nbsp;&nbsp;統一身份認證<sup>&nbsp;Beta</sup></span></h2>
        <hr style="height: 1px; border: none; border-top: 1px solid #dedede;">
    </div>
    <div class="col-md-8">
        <div id="myCarousel" data-ride="carousel" class="carousel">
            <!-- 輪播（Carousel）指標 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 輪播（Carousel）專案 -->
            <div class="carousel-inner">
                <div class="item active"> <img src="img/1.jpg" alt="First slide"> </div>
                <div class="item"> <img src="img/2.jpg" alt="Second slide"> </div>
                <div class="item"> <img src="img/3.jpg" alt="Third slide"> </div>
            </div>
            <!-- 輪播（Carousel）導航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev"></a> <a class="carousel-control right" href="#myCarousel"
                                         data-slide="next"></a> </div>
    </div>
    <div class="col-md-4 right">
        <div class="well col-md-12">
            <h3>使用者登入</h3>
            <form action="<%=basePath%>pages/back/admin_login.action" method="post" id="form">
                <div class="form-group">
                    <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user" ></i></span>
                        <input type="text" class="form-control" placeholder="使用者名稱"  name="email">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock" ></i></span>
                        <input type="password" class="form-control" placeholder="密碼"  name="password">
                    </div>
                </div>
                <a href="register.html" style="float: left">註冊新使用者</a> <a href="#" style="text-align: right">
                <p>忘記密碼？點選找回.</p>
            </a>
                <p>
                    <input type="submit" class="btn btn-primary btn-block"  value="登入系統">
                </p>
            </form>
        </div>
    </div>
    <footer class="col-md-12">
        <hr style="height:1px;border:none;border-top:1px solid #dedede;">
        <div class="col-md-6">
            <p>Copyright &copy; 2017 濟南陌訊資訊科技有限公司 All Rights Reserved.</p>
        </div>
        <div class="col-md-6">
            <div class="footer-i"> <i class="glyphicon glyphicon-globe"></i><a href="http://mosisson.com" target="_black">&nbsp;官方網站</a> </div>
            <div class="footer-i"> <i class="glyphicon glyphicon-envelope"></i><a href="mailto:[email protected]">&nbsp;技術支援</a> </div>
        </div>
    </footer>
</div>
</body>

PS: 作者使用了Botstrap框架來寫介面，如果你對Bootstrap框架不是很熟悉，那麼你可以閱讀作者之前寫過的文章【Web前端框架學習—Bootstrap】 來了解Bootstrap。

2.2 使用BootstrapValidator進行資料驗證

匯入BootstrapValidator的css檔案、js檔案後，就需要自己寫一段jQuery指令碼進行資料驗證。下面是作者寫的一個簡單的jQuery資料驗證指令碼，可參照文件註釋閱讀。

$(function () {  /* 文件載入，執行一個函式*/
    $('form').bootstrapValidator({

        message: 'This value is not valid',
        feedbackIcons: {  /*input狀態樣式圖片*/
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {  /*驗證規則*/
            email: {  //驗證email項
                validators: {
                    notEmpty: {  //非空驗證：提示訊息
                        message: '對不起，郵箱地址不能為空！'
                    },
                    emailAddress: {
                        message: '請輸入正確的郵箱地址如：[email protected]'
                    }
                }
            },

            password: {  //驗證password項
                message:'密碼無效',
                validators: {
                    notEmpty: {  //非空驗證：提示訊息
                        message: '密碼不能為空'
                    },
                    stringLength: {
                        min: 6,
                        max: 12,
                        message: '密碼長度必須在6到12之間'
                    },
                    different: {  //不能和使用者名稱相同
                        field: 'email',  //需要進行比較的input name值
                        message: '密碼不能和使用者名稱相同'
                    }
                }
            },
        }
    });
});

加了驗證之後，我們來看效果圖：
這裡作者把使用者名稱設定成使用email替代，輸入錯誤的郵箱地址，資料驗證不通過，css控制輸入框顯示為紅色，不可以點選登入按鈕。

這裡寫圖片描述

輸入正確的郵箱地址，輸入錯誤的密碼後，資料驗證不通過，css控制輸入框顯示為紅色，不可以點選登入按鈕。

這裡寫圖片描述

當用戶名、密碼全部輸入正確後，資料驗證通過，css控制輸入框顯示為綠色，可以點選登入按鈕。

這裡寫圖片描述

三. 參考資料

相關推薦

基於BootstrapValidator的資料驗證

零. 寫在前面 做web開發，經常需要使用到表單驗證，作者本人一開始也是自己寫各種驗證，最近接觸到BootstrapValidator，覺得非常好用，介面友好，使用方便，與Bootstrap完美相容，堪稱前端資料驗證神器。 那麼，今天，我們就來了解一下如何使

基於註解的通用資料驗證

前言 在專案開發互動過程中，難免會遇到一些資料校驗。以校驗客戶端傳送資料的合法性，對於一些非空校驗，我們也許可以使用@NonNull，@NotNull 等註解，可是對於一些常規的，如手機號，身份證等等的校驗，我們就還要判斷處理每個請求的引數的合法性。 但是合法性

實驗-----實現基於文件驗證的vsftpd虛擬用戶

基於文件驗證的vsftpd虛擬用戶準備安裝包：yum install vsftpd啟動服務: systemctl start vsftpd 步驟：一、創建虛擬用戶數據庫文件①編輯文本文件vim /etc/vsftpd/ftpuser.txt 奇數行是用戶名，偶數行是密碼 ftpuser1 12

基於文件驗證虛擬用戶

運維 一基於文件驗證虛擬用戶 ①創建虛擬用戶數據庫文件。 命令：vim /etc/vsftpd/viruser 把文件轉化為數據庫格式。 命令：db_load -T -t hash -f viruser viruser.db ②創建系統用戶和訪問FTP目錄。 ③創建pam配置文件。 命令

實驗——基於文件驗證和MYSQL驗證的vsftpd虛擬用戶

linux實驗一、實現基於文件驗證的vsftpd虛擬用戶1、創建用戶數據庫文件vim /etc/vsftpd/vusers.txtwangwangpassmagemagepasscd /etc/vsftpd/db_load -T -t hash -f vusers.txt vusers.dbchmod 600

實現基於文件驗證的vsftpd 虛擬用戶

vsftpd一、創建用戶數據庫文件 vim /etc/vsftpd/vusers.txtwangwangpassmagemagepass cd /etc/vsftpd/ db_load -T -t hash -f vusers.txt vusers.db chmod 600 vusers.db實現基於文件驗證

SpringSecurity03 基於內存驗證

control true tar ces post uri idea 註銷 fault 1 需求 　　現有一個編寫好的系統，需要實現用戶登錄驗證即可，同時根據用戶的權限來限制用戶可以訪問的接口 2 編寫SpringSecurity配置類 　　繼承 WebSecurity

基於Token的驗證

sig time timestamp mes coo 服務端 md5加密 時間 保存 什麽是token？ token相當於是一個令牌，在用戶登錄的時候由服務器端生成（基於用戶名、時間戳、過期時間、發行者等信息進行簽名），然後發放給客戶端，客戶端將令牌保存，在以後需要登錄驗證

小程式基於SSM資料互動

springmvc框架寫到現在終於牽扯到小程式了（所以別說我“不務正業”），對於一個應用程式來說，它的本質其實就是無數個對資料進行增刪改查的操作，這裡起到至關重要的就是資料，於是這篇帖子的目的就是實現小程式與後臺資料的互動。 小程式使用的是wx.request的api來提交和接收資料，最常見的就

Java基於jdbctemplate資料持久層操作封裝

相關資源分享-下載可直接使用： https://download.csdn.net/download/csdn_heliu/10736181 JdbcTemplate簡介： spring對資料庫的操作在jdbc上面做了深層次的封裝，使用spring的注入功能，可以把DataSour

[Visual Studio C++] [MFC] DDX(動態資料交換)和DDV(動態資料驗證)

DDX(動態資料交換)和DDV(動態資料驗證)是MFC中用於變數和控制元件間關聯資料和控制資料的巨集。 比如： DDX_Text(pDX,IDC_EDIT1,text); 就可以把變數text和控制元件IDC_EDIT1關聯起來，只要呼叫UpdateData(FALSE); 一旦text

自定義react資料驗證元件

　　我們在做前端表單提交時，經常會遇到要對錶單中的資料進行校驗的問題。如果使用者提交的資料不合法，例如格式不正確、非數字型別、超過最大長度、是否必填項、最大值和最小值等等，我們需要在相應的地方給出提示資訊。如果使用者修正了資料，我們還要將提示資訊隱藏起來。 　　有一些現成的外掛可以讓你非常方便地實現這一功能

『PHP學習筆記』系列九：利用from表單的onSubmit事件進行瀏覽器端的資料驗證

資料驗證思路：      當我們在網站進行註冊時，一般有兩個資料驗證的過程，一個是在伺服器端的驗證，一個是在瀏覽器端的驗證。瀏覽器端的驗證一般是用來驗證提交的資訊是否符合註冊的要求，即資料是否合法；伺服器端的驗證主要是驗證該註冊資訊是否已經存在於伺服器中，如果註

基於歷史資料的使用者訪問次數，每天新老使用者，日活，周活，月活的hive計算

最近有一個需求，統計每天的新老使用者，日活，周活，月活。 我們每天的增量資料會加入到hive歷史資料表中，包含使用者訪問網站的一些資訊，欄位有很多，包括使用者唯一標識guid。 當然了日活，周活，月活就是一個count(distinct(guid))語句，非常常用的sql。 但是

基於自制資料集的MobileNet-SSD模型訓練

基於自制資料集的MobileNet-SSD模型訓練 來源：QQ快報  責任編輯:小易   “本文主要內容：基於自制的仿VOC資料集，利用caffe框架下的MobileNet-SSD模型訓練。” 本文的base是https://github.com/chuanqi305

Python實現支援向量機（基於雙月資料集）

1、生成資料集 class moon_data_class(object): def __init__(self,N,d,r,w): self.N=N self.w=w self.d=d self.r=

Spark ML 基於Iris資料集進行資料建模及迴歸聚類綜合分析-Spark商業ML實戰

本套技術專欄是作者（秦凱新）平時工作的總結和昇華，通過從真實商業環境抽取案例進行總結和分享，並給出商業應用的調優建議和叢集環境容量規劃等內容，請持續關注本套部落格。版權宣告：禁止轉載，歡迎學習。QQ郵箱地址：[email protected]，如有任何商業交流，可隨時聯絡。

django_forms元件__作業之用ajax傳送資料驗證註冊

forms元件 -forms是什麼? 就是一個類,可以校驗欄位(前臺傳過來的欄位) -怎麼用: -校驗欄位功能: -先寫一個類,繼承Form from django.shortcuts

Django - 基於 ajax資料傳輸 + forms元件資料校驗 - 註冊功能頁面

目錄 一、forms元件 二、檢視函式 三、前端頁面 3-1 JQuery相關操作 四、資料庫相關 一、forms元件 from django import forms from django.core.exceptions import Validatio

metadata與資料驗證

metadata和資料驗證都在 system.componentmodel.dataannotations名稱空間下。 對於metadata,是因為我們ef databasefirst生成的model類每次 驗證屬性都會被清空，所以延伸出modelmetadata。 usi