Javascript表单验证

我的表单验证JavaScript遇到了一些麻烦。我有两个工作表单验证，但实际上不再需要一个。所以我正在尝试将它们组合成一个函数。问题是，如果我尝试，我不再使输入背景颜色正常工作。谁能告诉我我做错了什么？

     //onload callback function
     function main() {
        console.log("in main function");
        var myForm  = document.getElementById("payment");
        myForm.addEventListener("submit",validateForm);
      }
      //validate callback function 
      function validateForm(event) {
        var formValid = true;
        var myForm = document.getElementById("payment"); 
        console.log("in validateForm function")
        if (myForm.first_name.value == "") {
            formValid = false;
            //display error message 
            document.getElementById("firstname").className += " formInvalid"; //add the class .formInvalid
            //stop form from submitting
            event.preventDefault();
        } 
        else
            document.getElementById("firstname").className += " formvalid"; //add the class .formInvalid
        if (myForm.last_name.value == "") {
            formValid = false;
            //display error message 
            document.getElementById("lastname").className += " formInvalid"; //add the class .formInvalid
            //stop form from submitting
            event.preventDefault();
        } 
        else
            document.getElementById("lastname").className += " formvalid"; //add the class .formInvalid
        if (myForm.email.value == "") {
            formValid = false;
            //display error message 
            document.getElementById("email").className += " formInvalid"; //add the class .formInvalid
            //stop form from submitting
            event.preventDefault();
        } 
        else
            document.getElementById("email").className += " formvalid"; //add the class .formInvalid

        if (myForm.message.value == "") {
            formValid = false;
            //display error message 
            document.getElementById("message").className += " formInvalid"; //add the class .formInvalid
            //stop form from submitting
            event.preventDefault();
        } 
            else
            document.getElementById("message").className += " formvalid"; //add the class .formInvalid

      }




     //onload callback function
     function main2() {
        console.log("in main2 function");
        var myForm2  = document.getElementById("payment");
        myForm2.addEventListener("submit",validateinput);
      }

// form validation, makes sure that the user inputs the correct data types.         
    function validateinput(b){
    var myForm2 = document.getElementById("payment"); 
    console.log("in validateinput function")
    var email = document.getElementById('email').value;
    var firstname = document.getElementById('firstname').value;
    var lastname = document.getElementById('lastname').value;
    var message = document.getElementById('message').value;
    var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    var firstnameFilter = /^([" "a-zA-Z])+$/;
    var lastnameFilter = /^([" "a-zA-Z])+$/;
    var messageFilter = /^([" "a-zA-Z0-9_.-])+$/;
    var formValid = true;

    if (!emailFilter.test(email)) {
    formValid = false;
    //display error message
    alert('Please enter a valid e-mail address.');
    //stop form from submitting
    b.preventDefault();
    return false;
    }

    if (!firstnameFilter.test(firstname)) {
    formValid = false;
    alert('Please correct your first name.');
    //stop form from submitting
    b.preventDefault();
    return false;
    }

    if (!lastnameFilter.test(lastname)) {
    formValid = false;
    //display error message
    alert('Please correct your last name.');
    //stop form from submitting
    b.preventDefault();
    return false;
    }

    if (!messageFilter.test(message)) {
    formValid = false;
    //display error message
    alert('Please correct your message.');
    //stop form from submitting
    b.preventDefault();
    return false;
    }

    alert('Your message has beeen submitted')
    return true;
    }

两者都以相同的方式加载，并且在 html body 标签中有一个 onload 用于main(); main2();并且来自同一个脚本，正如你所看到的顶部函数validateForm(event)只是更改 calssname，所以我的 css 可以更改背景为有效或无效。这工作正常，但仅适用于空输入 "。我不知道如何将其更改为/^([" "a-zA-Z])+$/;我有另一个功能，它查找确切的输入，然后显示我要保留的警报消息。

我试图将它们合并到一个函数中，但我必须首先输入电子邮件，然后输入姓名，然后按该顺序输入姓氏，否则背景颜色/类名更改不会发生。我假设代码是从上到下读取的。而且document.getElementById("lastname").className += " formInvalid";也不起作用。请有人帮我解决这个问题。

     //onload callback function
     function main2() {
        console.log("in main2 function");
        var myForm2  = document.getElementById("payment");
        myForm2.addEventListener("submit",validateinput);
      }

// form validation, makes sure that the user inputs the correct data types.         
    function validateinput(b){
    var myForm2 = document.getElementById("payment"); 
    console.log("in validateinput function")
    var email = document.getElementById('email').value;
    var firstname = document.getElementById('firstname').value;
    var lastname = document.getElementById('lastname').value;
    var message = document.getElementById('message').value;
    var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/g;
    var firstnameFilter = /^([" "a-zA-Z])+$/g;
    var lastnameFilter = /^([" "a-zA-Z])+$/g;
    var messageFilter = /^([a-zA-Z0-9_.-])+$/g;
    var formValid = true;

    if (!emailFilter.test(email)) {
    formValid = false;
    //display error message
    document.getElementById("email").className += " formInvalid"; //add the class .formInvalid
    alert('Please enter a valid e-mail address.');
    //stop form from submitting
    b.preventDefault();
    return false;
    }
    else
    document.getElementById("email").className += " formvalid"; //add the class .formInvalid

    if (!firstnameFilter.test(firstname)) {
    formValid = false;
    //display erroe message
    document.getElementById("firstname").className += " formInvalid"; //add the class .formInvalid
    alert('Please correct your first name.');
    //stop form from submitting
    b.preventDefault();
    return false;
    }
    else
    document.getElementById("firstname").className += " formvalid"; //add the class .formInvalid

    if (!lastnameFilter.test(lastname)) {
    formValid = false;
    //display error message
    document.getElementById("lastname").className += " formInvalid"; //add the class .formInvalid
    alert('Please correct your last name.');
    //stop form from submitting
    b.preventDefault();
    return false;
    }
    else
    document.getElementById("lastname").className += " formvalid"; //add the class .formInvalid

    if (!messageFilter.test(message)) {
    formValid = false;
    //display error message
    document.getElementById("message").className += " formInvalid"; //add the class .formInvalid
    alert('Please correct your message.');
    //stop form from submitting
    b.preventDefault();
    return false;
    }
    else
    document.getElementById("message").className += " formvalid"; //add the class .formInvalid
    alert('Your message has beeen submitted')
    return true;
    }