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;
    }

两者的加载方式相同，并且在

main（）的html主体标记中有一个onload
main2（）和来自同一个脚本，正如您可以看到的，顶部函数
validateForm（event）
只需更改calssname，以便我的css可以更改vaild或invaild的背景。这很好，但仅适用于空输入“”。我不知道如何将其更改为
/^（[“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;
    }

注意：在提问之前一定要检查代码

缺少
打开功能
控制台日志

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

在
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;
    }

……

    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

在
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;
    }

函数体后缺少
}