javascript - 如何对该网站需求进行建模

Question

我必须设计一个允许用户制作自定义表单的网站。稍后此表单将分享给其他用户。

用户(表单创建者)可以选择“输入框”、“复选框”或“日期”等元素。元素将具有一组验证，例如“输入框”，用户可以选择“字母数字”或“仅数字”或“非空” "等。这些验证可能更复杂。

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

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

我的挑战是如何动态存储和创建用于验证的 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
    }
});

如果工厂函数或闭包比上面的构造函数更符合您的风格，您可以替换它们。