如何利用jQuery Validation Engine进行前台校验
的有关信息介绍如下:在进行Web前端开发时,为也提高用户体验,我们需要对前端页面上的表单元素进行校验,为了减少重复校验代码以及更友好的校验提示信息,本文通过引入jQuery Validation Engine(Jquery校验引擎)来讲解如何进行前台表单校验。
首先我们去Github上下载Jquery开源校验引擎jQuery-Validation-Engine,进入链接后切换到Release界面,本例选择下载最新的版本V2.6.4
打开自己的Web应用,在webapp\plugins\目录下新建文件夹jQuery-Validation-Engine,将【步骤1】中下载的压缩包解压到此目录
比如我们要校验学生信息表单,html页面如下所示
如果要校验上面表单,首先需要在前台页面中引入校验引擎相关的css及js文件
注意:
其中jquery.validationEngine-zh_CN.js中存放了校验的提示信息,可以根据语言需要选择引入相应提示信息文件
在需要校验的html元素上加上校验配置,比如校验必填项时只需要在class中加入validate[required]即可,此外校验项需要在包裹在form表单内,如下图可知,表单studentForm中加入了对Name及Description的必填校验。
注意:其他类型的校验配置如长度校验、正则校验等可以参考官方文档
配置完校验项后,还需要在Submit按钮的响应函数中启动校验引擎,submit的Onlick()响应函数如下:
function submitForm() {
var result = $('#studentForm').validationEngine('validate');
if(!result){
return false;
}
alert("success!");
}
打开表单,不填写Name和Description时直接点击提交按钮,会有对应校验提示,只有校验项满足要求时表单才能提交成功。