Javascript 如何避免MVC web应用程序的模型和视图中约束验证的重复代码？

完整性约束应该在MVC应用程序的模型类中定义，因为它们是模型类（表示业务对象类型）语义的一部分。但是，在基于HTML5表单的应用程序查看代码中，还必须在用户输入（以及表单提交按钮单击）上验证约束。我们如何避免重复验证代码并将其保存在JavaScript MVC应用程序的模型代码中？

不幸的是，许多MVC应用程序开发框架不提供任何支持来维护模型中的完整性约束代码，并将其用于视图中的数据验证（输入和表单提交时）和模型中（保存前）

我将尝试提供一个草图，说明我为解决HTML5表单API及其

setCustomValidity

和

checkValidity

方法的多重验证问题而开发的方法。因为它需要在视图和模型中执行相同的代码，所以它只能在JavaScript MVC web应用程序中工作pp，我们在应用程序的两个部分中使用相同的编程语言（JavaScript），这与其他（例如PHP od Java）web应用程序不同，后者的后端模型代码不是JavaScript

通常我们只需要验证属性约束。因此，编写一个类级检查函数来验证模型类每个属性的所有约束是很自然的。例如，下面的检查函数确保

Book

对象的ISBN属性的值是10位字符串或9位字符串后跟“X”：

check函数返回一个

ConstraintViolation

类的实例，该类具有字符串值消息属性。在提供视图（或UI）的HTML5表单中，我们将

input

事件的事件侦听器添加到相关表单输入字段，以处理用户输入的验证：

isbnInpEl.addEventListener("input", function () { 
  isbnInpEl.setCustomValidity( Book.checkIsbn( isbnInpEl.value).message);
});

此事件侦听器调用具有字符串参数的

setCustomValidity

方法。我们提供由属性检查函数创建的消息作为调用

setCustomValidity

的参数。如果它为空，则表示用户输入有效。否则，如果它包含非空约束冲突在sage中，HTML5浏览器将负责向用户指示违反约束的情况（例如，通过显示输入字段的红色边框并显示消息）

为了处理表单提交按钮点击时的验证，我们通过调用表单元素对象上的HTML5

checkValidity

方法来检查表单的所有输入字段：

if (formEl.checkValidity()) {
  // save
  formEl.reset();
}

最后，为了在保存任何新数据之前检查模型类中的约束，我们可以调用属性设置器中的检查函数，如中所示

Book.prototype.setIsbn = function (isbn) {
  var validationResult = Book.checkIsbn( isbn);
  if (validationResult instanceof NoConstraintViolation) {
    this.isbn = isbn;
  } else {
    throw validationResult;
  }
};

您可以在我的书中找到完整的示例代码

Book.prototype.setIsbn = function (isbn) {
  var validationResult = Book.checkIsbn( isbn);
  if (validationResult instanceof NoConstraintViolation) {
    this.isbn = isbn;
  } else {
    throw validationResult;
  }
};