如何利用jQuery Validation Engine进行前台校验

在进行Web前端开辟时，为也提高用户体验，我们需要对前端页面上的表单位素进行校验，为了削减反复校验代码以及更友爱的校验提醒信息，本文经由过程引入jQuery Validation Engine（Jquery校验引擎）来讲解若何进行前台表单校验。

东西/原料

• jQuery Validation Engine v2.6.4
• Intellij Idea 2017.1

方式/步调

1. 1

   起首我们去Github上下载Jquery开源校验引擎jQuery-Validation-Engine，进入链接后切换到Release界面，本例选择下载最新的版本V2.6.4

   
2. 2

   打开本身的Web应用，在webapp\plugins\目次下新建文件夹jQuery-Validation-Engine，将【步调1】中下载的压缩包解压到此目次

   
3. 3

   好比我们要校验学生信息表单，html页面如下所示

   
4. 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. 5

   在需要校验的html元素上加上校验设置装备摆设，好比校验必填项时只需要在class中插手validate[required]即可，此外校验项需要在包裹在form表单内，如下图可知，表单studentForm中插手了对Name及Description的必填校验。

   注重：其他类型的校验设置装备摆设如长度校验、正则校验等可以参考官方文档

   
6. 6

   设置装备摆设完校验项后，还需要在Submit按钮的响应函数中启动校验引擎，submit的Onlick（）响应函数如下：

      function submitForm() {

           var result = $('#studentForm').validationEngine('validate');

           if(!result){

               return false;

           }

           alert("success!");

       }

   
7. 7

   打开表单，不填写Name和Description时直接点击提交按钮，会有对应校验提醒，只有校验项知足要求时表单才能提交当作功。

   

注重事项

• 若是小编所写经验帮忙到了你，请帮手给点个赞或评论撑持下，您的撑持是作者继续创作的动力！