在进行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进行前台校验】
推荐阅读
- 华为运动手环首次使用如何与手机配对连接
- 如何缝方向盘套
- 如何用人民币折桃心
- 如何用红绳编各种手链
- 金刚结教程 教你如何编织金刚结
- wifi快报如何关闭
- 如何注册淘宝网
- 如何在Flash中显示当前日期
- AutoCAD如何旋转二维图形创建三维实体
- word如何取消自动编号功能