javascript - 单页有多个表单时提交表单的最佳实践

Answer 1

例如，从一个对象中的表单中收集所有信息，对其FormData进行验证并提交，以防万一。

document.getElementById('btnName').onsubmit = function(e){
    e.preventDefault();

    function valid(obj){
        // validation check
        if(){
            return true
        }
        return false
    }

    var fd = new FormData();
    var obj = {},
        frm, fld;
    for (var f = 0; f < document.forms.length; f++) {
        frm = document.forms[f];
        for (var e = 0; e < frm.elements.length; e++) {
            fld = frm.elements[e];
            obj[fld.name] = fld.value;
        }
    };


    if(valid(obj)){
        for (i in obj){
            fd.append(i, obj[i]);
        }
        var xhr = new XMLHttpRequest();
        xhr.open("POST", f.action);
        // 
        xhr.send(fd);
    }else{
        // for example
        alert('something is wrong';)
    }

}

中心部分的混乱更少：

    var obj = {};
    document.forms.forEach(function(frm){
        frm.forEach(function(el){
            obj[el.name] = el.value;
        });
    });

如果离开已填写表格的页面：打开一个事件window.onbeforeunload并询问用户是否要离开。

简单验证以检查是否填充了任何内容：

function anyFilled(){
    var obj = {};
    document.forms.forEach(function(frm){
        frm.forEach(function(el){
            if(el.value)
                //some decoration
                el.style.border = 'solid 2px red';
                return true
        });
    });
    return false
}

Answer 2

表单验证后：我会做的一件事是，如果特定字段有错误，将该字段的边框颜色更改为红色或会引起您注意的颜色，然后在该字段旁边显示错误。这样，用户就知道哪个确切的字段有错误，以及他们可以做些什么来修复它。

Answer 3

在提交 myDog 表单时调用 form-Validation，首先检查 myCat-Form 的空白/其他验证。如果无效，则返回 false/显示错误消息。

您可以设置一个隐藏字段，如果 my cat 表单提交完成，则在 myDog 表单提交时将其值设置为“1”检查隐藏字段值/myCat 表单字段，然后显示错误。