基于Backbone.js的JavaScript MVC示例程序(9)

一．概述

二．REST Server的实现

2.1 REST API设计

2.2 数据库设计

2.3 用MyBatis实现的DAO层

2.4 用Jersey实现的REST API

2.5 用Spring AOP实现的日志功能

三．前端的实现

3.1 显示User列表

3.2 显示User详细信息

3.3 修改User信息

3.4 增加User

3.5 删除User

3.6 添加validate

3.6 添加validate

使用 JavaScript 实现表单的验证是一个很常见的问题，jQuery 有不少表单验证的插件，只需要经过简单的配置就能完成验证的功能。

因为是初学 JavaScript，所以先自己用 jQuery 写了一个表单验证的例子，然后讨论一下怎样将 jQuery 的表单验证用到 Backbone.js 构建的程序中，最后使用 Backbone.Model 的 validate() 方法来实现验证的过程。

3.6.1 使用 jQuery 实现的表单验证

表单只有四个 input，界面如图所示：



各字段的验证规则如下：



6.1.html 表单相关的 HTML 代码如下，因为想熟悉一下 jQuery 选择器的使用，所以 HTML 中没有使用任何的 id/class：

<form action="#" method="post">
<p>
<label for="username">Username:</label>
<input type="text" name="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="text" name="password" />
</p>
<p>
<label for="re-password">Re-password:</label>
<input type="text" name="re-password" />
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email" />
</p>
<p><input type="submit" value="Register" /></p>
</form>

jquery-validate-1.js 的源码如下，关键的地方已经给出注释：

$(document).ready(function(){

//光标移动到username的input时触发，如果已经有错误/正确提示则不改变提示，如果没有提示输入
$("input[name='username']").focus(function(){
if ($("input[name='username']+span.error").size() == 0
&& $("input[name='username']+span.success").size() == 0) {
$(this).after("<span class='hint'>Please enter your username.</span>");
}
});
//光标移出username的input时触发
$("input[name='username']").blur(function(){
$("input[name='username']+span").remove(); //去掉之前的提示
if($(this).val().length < 6 || $(this).val().length>12){ //判断长度，给出提示
$(this).after("<span class='error'>Username contains 6-12 characters.</span>");
}else{ //向服务器发出AJAX请求，判断username是否已经存在，给出提示
$.ajax({
url:"./rest/user/validate/"+$(this).val(),
success:function(data, textStatus){
if(data == "true"){
$("input[name='username']").after("<span class='success'>Passed.</span>");
}else{
$("input[name='username']").after("<span class='error'>Username has been used.</span>");
}
}
});
}
});

$("input[name='password']").focus(function(){
if ($("input[name='password']+span.error").size() == 0
&& $("input[name='password']+span.success").size() == 0) {
$(this).after("<span class='hint'>Please enter password again.</span>");
}
});
$("input[name='password']").blur(function(){
$("input[name='password']+span").remove();
if($(this).val().length < 6 || $(this).val().length>12){
$(this).after("<span class='error'>Password contains 6-12 characters.</span>");
}else{
$(this).after("<span class='success'>Passed.</span>");
}
});

$("input[name='re-password']").focus(function(){
if ($("input[name='re-password']+span.error").size() == 0
&& $("input[name='re-password']+span.success").size() == 0 ) {
$(this).after("<span class='hint'>Please enter your password again.</span>");
}
});
$("input[name='re-password']").blur(function(){
$("input[name='re-password']+span").remove();
if($(this).val() ==""){
$(this).after("<span class='error'>Please enter your password again.</span>");
}else if($(this).val() != $("input[name='password']").val()){ //判断两次输入的password是否相同
$(this).after("<span class='error'>Two passwords are not same.</span>");
}else{
$(this).after("<span class='success'>Passed.</span>");
}
});

$("input[name='email']").focus(function(){
if ($("input[name='email']+span.error").size() == 0
&& $("input[name='email']+span.success").size() == 0 ) {
$(this).after("<span class='hint'>Please enter your email.</span>");
}
});
$("input[name='email']").blur(function(){
$("input[name='email']+span").remove();
if(!$(this).val().match(/^\w{3,}@\w+(\.\w+)+$/)){ //正则表达式判断email格式是否正确
$(this).after("<span class='error'>Invalid email format.</span>");
}else{
$(this).after("<span class='success'>Passed.</span>");
}
});

//表单提交的时候触发所有input的blur事件，如果没有error才能提交表单
$("form").submit(function(){
$("input").blur();
if ($("form span.error").size() > 0) {
return false;
}
});

});

注意看78-83行，表单提交的事件（submit）发生时手动触发了所有 input 的 blur 事件，如果没有 error 才能提交表单。这样可以避免没有填写某个 input，而导致它的 blur 事件没有触发，并没有进行正确的验证。

写这个例子时也遇到了一些问题，在解决问题的过程中学到了不少，对 jQuery 的选择器、AJAX请求、页面操作等等都更熟悉了。

3.6.2 将 jQuery 的表单验证用到 Backbone.js 的程序中

上面 jQuery 的表单验证是在我学习 Backbone.js 之前写的，因此和我们的这个示例程序不太一样，我们之前写的 Backbone.js 程序中没有表单，少了 re-password，多了 phone，也懒得再改了，直接拿过来用吧，反正关键问题是如何整合起来使用。

我们简单地将 jquery-validate-1.js 引入到 5.html 文件中，测试发现根本不起作用。原因是 jquery-validate-1.js 中使用的是最常见的绑定事件的方法，只能将事件绑定到 $(document).ready() 执行的时候已经存在的页面元素上，而我们的所有 input 都是后来由 Backbone.js 显示出来的，所以绑定不上。

jQuery 中对事件的绑定有 bind() live() delegate() 三种方法，三者的区别看这里：http://kb.cnblogs.com/page/94469/。简单地来说 bind() 将事件绑定到特定的 DOM 元素上，加载的时候不存在就绑不上；live() 将事件绑定到 $(document) 元素上，事件发生的时候动态地去搜索符合要求的 DOM 元素；delegate() 将事件绑定到某个 DOM 元素上，事件发生的时候动态地去它的所有子元素里面搜索符合要求的 DOM 元素。因此我们使用 delegate() 改编一下 jquery-validate-1.js。

例如，在jquery-validate-1.js 中

$("input[name='username']").focus(function(){...});

改为 jquery-validate-2.js 中的：

$("#right").delegate("input[name='username']","focus",function(){...});

其他 input 相关的事件也这么修改一下就行了，测试之后发现对 input 的验证都可以正常使用了。

但是我们的程序中没有表单，因此也不会触发 submit 事件，只需要将 submit 事件上绑定的的内容移到 UserInfoView.submitEdit() UserListView.submitUserForm() 中，在 model 向服务器端 sync 之前判断有没有 error，如果有 error 就阻止 sync 的执行。mvc6.2.js 代码如下所示：

var UserInfoView = Backbone.View.extend({
submitEdit : function() { //修改
$("input").blur();
if ($("span.error").size() > 0) {
return;
}
this.model.save({
"username":$("input[name='username']").val(),
"password":$("input[name='password']").val(),
"email":$("input[name='email']").val(),
"phone":$("input[name='phone']").val(),
});
this.$("#user-info").removeClass("editing");
},
...//其余不变
});

var UserListView = Backbone.View.extend({
submitUserForm : function() { //修改
$("input").blur();
if ($("span.error").size() > 0) {
return;
}
var user  = new User({
"username":$("input[name='username']").val(),
"password":$("input[name='password']").val(),
"email":$("input[name='email']").val(),
"phone":$("input[name='phone']").val(),
});

this.userList.create(user,{wait:true});
$("input[name='username']").val(""),
$("input[name='password']").val(""),
$("input[name='email']").val(""),
$("input[name='phone']").val(""),
alert("Add a user!");
},
...//其余不变
});

还有一个方法就是将这部分内容移到 Backbone.Model 的 validate() 方法中去，也就是说还可以这么修改：

var User = Backbone.Model.extend({
validate : function(attrs) { //新增
$("input").blur();
if ($("span.error").size() > 0) {
return "hahaha"; //随便返回什么，触发error事件就能阻止sync的发生了
}
}
});

上面两个解决方法选一个就行了。关于 validate() 方法的详解请看下一小节。

3.6.3 使用 Backbone.Model 的 validate() 实现验证

首先来看一下官网对 validate() 的说明：

model.validate(attributes)

该方法是未定义的，如果有在Javascript执行的需要，建议用自定义的验证逻辑重载它。 validate 会在 set 和 save 之前调用，并传入待更新的属性。 如果模型和属性通过验证，不返回任何值； 如果属性不合法，返回一个可选择的错误。该错误可以是简单的用于显示的字符串错误信息， 或者是一个可以描述错误详细的 error 对象。 如果 validate 返回错误，set 和 save 将不会执行。 失败的验证会触发一个 "error" 事件。

所以说 validate() 只能对 model 的所有属性整体做一次验证，然后返回错误信息，不能像 jQuery 那样在填完每一个 input 之后都进行验证。

Model 里面虽然没有定义 validate() 方法，但是有个 _validate() 方法，会在 Model.set()、Model.save()、Collection.create() 中被调用，_validate() 的源码如下：

// Run validation against the next complete set of model attributes, returning `true` if all is well. If a specific `error` callback has been passed, call that instead of firing the general `"error"` event.
_validate: function(attrs, options) {
if (options.silent || !this.validate) return true;
attrs = _.extend({}, this.attributes, attrs);
var error = this.validate(attrs, options);
if (!error) return true;
if (options && options.error) {
options.error(this, error, options);
} else {
this.trigger('error', this, error, options);
}
return false;
}

可以看出来，如果 validate() 有返回值，那么就会触发 error 事件（10行），并且有 this、error、options 三个参数，我们可以根据第二个参数来输出错误信息。

首先在 6.3.html 的表单中加入显示错误信息的部分：

<!-- 增加显示错误信息的位置  -->
<script type="text/template" id="user-info-template">
<h3>User Information</h3>
<button id="edit">Edit</button>
<p class="error"></p>
<ul id="user-info">
<li>ID:<span><%= id %></span></li>
<li>Username:<span><%= username %></span><input type="text" name="username" value="<%= username %>" /></li>
<li>Password:<span><%= password %></span><input type="password" name="password" value="<%= password %>" /></li>
<li>Email:<span><%= email %></span><input type="text" name="email" value="<%= email %>" /></li>
<li>Phone:<span><%= phone %></span><input type="text" name="phone" value="<%= phone %>" /></li>
<button id="edit-submit">Submit</button>
</ul>
</script>
<!-- 增加显示错误信息的位置  -->
<script type="text/template" id="user-form-template">
<h3>Add User</h3>
<p class="error"></p>
<ul id="user-form" class="editing">
<li>Username:<input type="text" name="username" /></li>
<li>Password:<input type="password" name="password" /></li>
<li>Email:<input type="text" name="email" /></li>
<li>Phone:<input type="text" name="phone" /></li>
<button id="add-submit">Submit</button>
</ul>
</script>

然后对 mvc6.3.js 进行修改，在 User 中加入 validate() 方法，在 UserInfoView.submitEdit()、UserListView.submitUserForm() 中加入对错误信息的显示：

$(document).ready(function() {

var User = Backbone.Model.extend({
validate : function(attrs) { //新增，验证属性是否合法
if (attrs.username.length<6 || attrs.username.length>12) {
return "Username contains 6-12 characters.";
}
var obj = $.ajax({
url : "./rest/user/validate/" + attrs.username,
async : false,
});
if (obj.responseText == "false") {
return "Username has been used.";
}
if (attrs.password.length<6 || attrs.password.length>12) {
return "Password contains 6-12 characters.";
}
if (attrs.email.length == 0) {
return "Please enter your email.";
}
if(!attrs.email.match(/^\w{3,}@\w+(\.\w+)+$/)){
return "Invalid email format.";
}
},
});

var UserInfoView = Backbone.View.extend({
submitEdit : function() { //修改
var m = this.model;
this.model.save({
"username":$("input[name='username']").val(),
"password":$("input[name='password']").val(),
"email":$("input[name='email']").val(),
"phone":$("input[name='phone']").val(),
},
{
error : function(m,error) {  //显示错误信息
$(".error").html(error);
},
success : function() {
$("#user-info").removeClass("editing");
}
});
},
... //其余不变
});

var UserListView = Backbone.View.extend({
submitUserForm : function() {
var user  = new User({
"username":$("input[name='username']").val(),
"password":$("input[name='password']").val(),
"email":$("input[name='email']").val(),
"phone":$("input[name='phone']").val(),
});
var m = this.model; //修改
this.userList.create(user,{
wait : true,
error : function(m,error) { //显示错误信息
$(".error").html(error);
},
success : function() {
$("input[name='username']").val(""),
$("input[name='password']").val(""),
$("input[name='email']").val(""),
$("input[name='phone']").val(""),
alert("Add a user!");
}
});
},
... //其余不变
});
... //其余不变
});

完成之后的界面如下图所示：