词条统计
浏览次数:8531 次
编辑次数:2次 历史版本
最近更新:2013/9/18
创建者:掷鸡蛋者

这部分我们引入 wojilu ajax 框架,来增强客户端体验。

回到用户添加界面,如果我们什么内容都不输入,直接点击提交按钮,结果是这样子:

一旦发生错误,MVC框架会自动将报错信息呈现在表单的上部。整个过程经过了服务器端验证,页面发生了一次刷新。

现在我们不需要这个刷新过程,让验证直接在客户端进行。我们需要用到4个js文件:

代码中选定的4行有5点需要注意:

1、"~js/"表示js默认所在目录,通常这个目录在 static/js 目录下

2、变量 jsVersion 是框架的全局变量,表示js的版本号,作用和前面的 cssVersion 一样,用于向客户端暗示需要刷新了。

3、因为wojilu 客户端ajax框架使用了 jquery 这个通用类库(library),所以需要第一个引用 jquery。

4、因为 wojilu MVC 框架支持语言的国际化(i18n),所以您需要引用 wojilu ajax framework 的语言包文件

5、最后,当然就是 wojilu ajax framework 的核心文件 wojilu.common.js 了,它提供了客户端验证、弹窗、局部更新……等功能。

这4行js引用代码,实际项目中运行的结果如下:

有了这4个js 文件,那我们就可以使用 wojilu ajax 客户端验证了。现在,请打开 views/Article/Add.html 文件,添加如下代码:

选定部分就是添加的代码。这部分span代码非常短,只有两个属性:

1、属性 class="valid" 表示这个 span元素是一个验证控件,默认验证它的前一个Html元素,这里是前面的 input 文本输入框;
2、属性 msg 表示验证错误之后,出错的提示内容。

任何Html元素,只要打上 class="valid" 属性,都表示验证控件。验证控件可以提供 rule 属性表示验证规则,如果不提供,则默认检查对象的值是否存在。这里就是检查前面的 input 文本输入框是否有值。

我们还是什么值都不输入,直接点击“提交”按钮,看下效果:

错误提示信息在文本输入框旁边出现。

您可以看到,整个客户端验证过程,其实不需要写一行js代码,只需要提供 html 元素即可——这就是 wojilu ajax framework 的设计理念:

零js书写,直接使用 html 元素以及它的属性来实现功能

“零js书写”是理想目标,实际项目中,不可能完全做到。但使用 wojilu ajax framework ,您可以做到基本上不用写js了。


【补充说明】:wojilu框架1.9,增加了 RequireJS 前端框架,上面的js都统一纳入了 RequireJS 管理,步骤大体相同,需要稍微改造一下。改造步骤,请参看此处:http://www.wojilu.com/forum1/topic/4213