在進行Web前端開辟時 ， 為也提高用戶體驗 ， 我們需要對前端頁面上的表單位素進行校驗 ， 為了削減反復校驗代碼以及更友愛的校驗提醒信息 ， 本文經由過程引入jQuery Validation Engine（Jquery校驗引擎）來講解若何進行前臺表單校驗 。

需要這些哦
jQuery Validation Engine v2.6.4
Intellij Idea 2017.1
方式/
1起首我們去Github上下載Jquery開源校驗引擎jQuery-Validation-Engine ， 進入鏈接后切換到Release界面 ， 本例選擇下載最新的版本V2.6.4

2打開本身的Web應用 ， 在webapp\plugins\目次下新建文件夾jQuery-Validation-Engine ， 將【
1】中下載的壓縮包解壓到此目次




3好比我們要校驗學生信息表單 ， html頁面如下所示




4若是要校驗上面表單 ， 起首需要在前臺頁面中引入校驗引擎相關的css及js文件
<link rel="stylesheet" href=https://vvvtt.com/article/"/plugins/jQuery-Validation-Engine/css/validationEngine.jquery.css">
<script src=https://vvvtt.com/article/"/plugins/jQuery-Validation-Engine/js/languages/jquery.validationEngine-zh_CN.js">
<script src=https://vvvtt.com/article/"/plugins/jQuery-Validation-Engine/js/jquery.validationEngine.js">
注重：
此中jquery.validationEngine-zh_CN.js中存放了校驗的提醒信息 ， 可以按照說話需要選擇引入響應提醒信息文件







5在需要校驗的html元素上加上校驗設置裝備擺設 ， 好比校驗必填項時只需要在class中插手validate[required]即可 ， 此外校驗項需要在包裹在form表單內 ， 如下圖可知 ， 表單studentForm中插手了對Name及Description的必填校驗 。
注重：其他類型的校驗設置裝備擺設如長度校驗、正則校驗等可以參考官方文檔




6設置裝備擺設完校驗項后 ， 還需要在Submit按鈕的響應函數中啟動校驗引擎 ， submit的Onlick響應函數如下：
   function submitForm() {
        var result = $('#studentForm').validationEngine('validate');
        if(!result){
            return false;
        }
        alert("success!");
    }




7【如何利用jQuery Validation Engine進行前臺校驗】

• 上一頁
• 1
• 2
• 下一頁

猜你喜歡

• 華為運動手環首次使用如何與手機配對連接
• 如何縫方向盤套
• 如何用人民幣折桃心
• 如何用紅繩編各種手鏈
• 金剛結教程 教你如何編織金剛結
• wifi快報如何關閉
• 如何注冊淘寶網
• 如何在Flash中顯示當前日期
• AutoCAD如何旋轉二維圖形創建三維實體
• word如何取消自動編號功能