如何利用jQuery Validation Engine進行前臺校驗
在進行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="/plugins/jQuery-Validation-Engine/css/validationEngine.jquery.css">
<script src="/plugins/jQuery-Validation-Engine/js/languages/jquery.validationEngine-zh_CN.js"></script>
<script src="/plugins/jQuery-Validation-Engine/js/jquery.validationEngine.js"></script>
注重：
此中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
打開表單，不填寫Name和Description時直接點擊提交按鈕，會有對應校驗提醒，只有校驗項知足要求時表單才能提交當作功。
注重事項
- 若是小編所寫經驗幫忙到了你，請幫手給點個贊或評論撐持下，您的撐持是作者繼續創作的動力！
- 發表于 2018-03-25 00:00
- 閱讀 ( 944 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章