如何对此网站需求进行建模

Question

我必须设计一个网站，允许用户制作一个定制的形式。稍后将该表单共享给其他用户。

用户(表单的创建者)可以选择像"input box“，"check box”或"date“等元素。每个元素都有一组验证，比如”输入框“，用户可以选择"alphanumeric”或"only digits“或"not empty”等。

然后与其他用户(表单的接收者)共享表单。他们在表单中填写他们的值。

收到表单的用户应该面对每个字段的相同验证，如由表单所有者设置。

我的挑战是如何动态地存储和创建用于验证的javascript？

如果它是简单的元素，那么我可以存储完整的HTML并将其呈现在显示器上，但在这里需要进行验证。

任何关于如何实现此功能的想法。

谢谢

Answer 1

最简单的方法是定义一个伪类：

function Validator(args){
    this.type = args.type || 'object';
    this.max = args.max || null;
    this.min = args.min || null;
    this.canBeEmpty = args.empty || false;
    this.validate = function(input) {
        var bool = true; //this is going to be true/false for valid/invalid
        if ((typeof(input) != this.type) || (!this.canBeEmpty && input === '')) {
            bool = false;
        } else {
            if (this.type == 'number') {
                //test against min/max
            }
        }
        return bool;
    }
}

var myFormValidator = new Validator(); //optionally add necessary arguments
var element = document.getElementById(/*input element id*/);
element.addEventListener('change', function() {
    var value = element.value; //or text, or whatever is appropriate
    var valid = myFormValidator.validate(value);
    if (valid) {
        //do stuff
    } else {
        //do other stuff
    }
});

如果这比上面的构造函数更符合你的风格，你可以用工厂函数或者闭包来代替。