如何利用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
- 阅读 ( 942 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章