javascript - 使用数据注释和 JavaScript 进行模型/表单验证

Question

我想在我的 ASP MVC 应用程序上实现数据验证。我目前正在使用这样的数据注释:

[Required]
public string UserName { get; set; }

然后会变成类似的东西

<input type='text' ... data-required>

我可以使用 jquery 非侵入式验证来验证它，但是，这个项目没有 jQuery。它是直接从 Javascript 构建的，我们计划保持这种状态。

有什么方法可以在没有 jQuery 的情况下做到这一点吗？

Answer 1

因此，根据评论，有一些库可以在 Javascript 中实现模型验证。我写过一篇，Egkyron ，并在我的工作中使用它。使用这些库，您可以为模型而不是 UI 定义验证规则，就像在服务器端一样。

假设 JS 中定义的 User 模型为:

function User() {
  this.userName = null;
  this.password = null;
  this.passwordVerification = null;
}

你可以将其验证规则定义为相当于JS注解:

User.validators = {
  // key is property name from the object; value is the validation rules
  userName: [
    // the userName is required...
    'required',
    // ...and some arbitrary rules for demonstrating:
    // "the user name starts with a lower-case letter and consists only of lower-case letters and numbers"
    ['regexp', {re: /^[a-z][a-z0-9]*$/}],
    // "the length of the user name is between 5 and 8 characters (inclusive)"
    ['length', {min: 5, max: 8}]
  ]
};

如果使用 Babel 或 Typescript，您可以查看装饰器，这是 ES7 规范的提案。 TS 类可以注释为:

class User {
    @Required()
    @RegExp(/^[a-z][a-z0-9]*$/)
    @Length({min: 5, max: 8})
    userName: string;
    ...
}

这与您在服务器端使用 Java 或 C# 编写的内容非常接近。事实上，在之前的项目中，我们从服务器端 C# 类生成了 JS 类 + 验证规则。

然后，假设您获得了一个 User 对象，您可以使用 Egkyron 对其进行验证，如下所示:

var validator = new egkyron.Validator(/* see the example for constructor arguments */);
var user = ...; // instance of a User
var validationResult = validator.validate(user).result;

验证器是可重用的；如果 user = new User() 验证结果如下所示:

{   // validation result for the given User
    _thisValid: true, // no validation rules of **this** object failed
    _validity: null,  // there are no validation rules for this object (only for its properties)
    _childrenValid: false, // its properties and/or children objects are invalid
    _children: {      // detailed report of its children objects/properties
        userName: {   // child property name
            _thisValid: false, // the userName is invalid (required but not given)
            _children: null,   // terminal node, no children
            _validity: { // detailed report about each validation rule
                required: { isValid: false, ... }, // the "required" constraint failed
                regexp: { isValid: true, ... },    // empty value => regexp validity defaults to true
                length: { isValid: true, ... }     // empty value => length validity defaults to true
            }
        },
        ...
    }
}

获得验证结果后，您可能希望将其呈现给 UI。有无数不同的要求以及它们的微小变化。我相信要让他们所有人都满意是不可能的。即使我们能够满足所有这些要求，库的大小也将是巨大的，而且很可能库本身并不真正可用。

因此 Egkyron 将 UI 集成留给了用户。有示例，我很乐意回答任何问题。

除了examples ，这里是 plunk使用上面的普通浏览器 JS 示例。