Javascript表单验证

Question

我的表单验证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(); main2();的html正文标记中加载并且来自同一个脚本，因为您可以看到顶部函数validateForm(event)只是更改calssname所以我的css可以改变vaild或invaild的背景。这样可以正常工作，但仅适用于空输入＆＃34;＆＃34;。我不知道如何将其更改为/^([" "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;
    }

Answer 1

注意：在提出问题之前，请检查您的代码！ http://www.javascriptlint.com/

// 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")

在功能;上缺少console.log

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

在功能主体

之后缺少}