Javascript Pure JS：使用一些公共字段/元素和一些唯一字段/元素的多表单验证

我在一页中有多个表单。有些元素/字段对于所有表单都是通用的，有些元素/字段对于每个表单都是唯一的。我需要验证所有表单，并且我想使用单个JS函数进行验证。每次提交表单时，它都会在重定向到另一个页面之前调用validateForms（）函数。下面是我的JavaScript和表单布局。我可以验证第一个表单，但是，我不能验证其他两个表单。下面是修改后的代码。请有人帮帮我

JavaScript

    function validateForms(formName){
        var environment = document.forms[formName].environment;
        var browser = document.forms[formName].browser;
        var userType = document.forms[formName].userType;
        var username = document.forms[formName].usernameLoginUser;
        var password = document.forms[formName].passwordLoginUser;

        if (userType.selectedIndex < 1)
        {
            alert("Please Select userType");
            userType.focus();
            return false;
        }

        if (environment.selectedIndex < 1)
        {
            alert("Please Select Environment");
            environment.focus();
            return false;
        }


        if (browser.selectedIndex < 1)
        {
            alert("Please Select Browser");
            browser.focus();
            return false;
        }

        if (username.value == "")
        {
            window.alert("Please enter Username");
            username.focus();
            return false;
        }

        if (password.value == "")
        {
            window.alert("Please enter password");
            username.focus();
            return false;
        }

        return true;
}

函数validateForms（formName）{
var-environment=document.forms[formName].environment；
var browser=document.forms[formName].browser；
var userType=document.forms[formName].userType；
var username=document.forms[formName].usernameLoginUser；
var password=document.forms[formName].passwordLoginUser；
if（userType.selectedIndex<1）
{
警报（“请选择用户类型”）；
userType.focus（）；
返回false；
}
if（environment.selectedIndex<1）
{
警报（“请选择环境”）；
focus（）；
返回false；
}
如果（browser.selectedIndex<1）
{
警告（“请选择浏览器”）；
focus（）；
返回false；
}
如果（username.value==“”）
{
window.alert（“请输入用户名”）；
username.focus（）；
返回false；
}
如果（password.value==“”）
{
窗口提示（“请输入密码”）；
username.focus（）；
返回false；
}
返回true；
}

HTML文件：

    <form name="firstForm" onsubmit="return validateForms('firstForm')" action="GET">
    <select name="environment">..</select>
    <select name="userType">..</select>
    <input type="submit" value="submit" />
    </form>
    <form name="secondForm" onsubmit="return validateForms('secondForm')" action="GET">
    <select name="environment">..</select>
    <select name="browser">..</select>
    <input type="submit" value="submit" />
    </form>
    <form name="thirdForm" onsubmit="return validateForms('thirdForm')" action="GET">
    <select name="environment">..</select>
    <input type="text" name="username" placeholder="username"/>
    <input type="password" name="password" placeholder="password"/>
    <input type="submit" value="submit" />
    </form>

..
..
..
..
..

实际上，在尝试引用当前表单中不存在的变量之前，您的代码一直有效。您可以单步执行，直到该点，然后触发错误。如果希望对每个表单使用相同的函数，则需要在引用表单变量之前测试表单变量是否存在

很高兴你让它工作了。我稍微修改了代码，使其看起来像这样：

var currentForm= document.forms[formName]

    if ( typeof(currentForm.environment) !== 'undefined'){
    if (currentForm.environment.selectedIndex < 1 ) {
                alert("Please Select Environment");
            currentForm.environment.focus();
            return false; 
    } 
} ;


    if ( typeof(currentForm.userType) !== 'undefined'){
    if (currentForm.userType.selectedIndex < 1 ) {
                alert("Please Select userType");
            currentForm.userType.focus();
            return false; 
    } 
} ;

var currentForm=document.forms[formName]
if（typeof（currentForm.environment）！=‘未定义’）{
如果（currentForm.environment.selectedIndex<1）{
警报（“请选择环境”）；
currentForm.environment.focus（）；
返回false；
} 
} ;
if（typeof（currentForm.userType）！=‘未定义’）{
如果（currentForm.userType.selectedIndex<1）{
警报（“请选择用户类型”）；
currentForm.userType.focus（）；
返回false；
} 
} ;

我想我还是会把它贴出来，以防万一。我认为，当你进一步了解这一点时，你会希望在对表单变量进行任何操作之前，先测试表单变量的存在性

试试下面的代码

函数validateForms（表单）{
var-environment=document.forms[form].environment；
var browser=document.forms[form].browser；
var userType=document.forms[form].userType；
var username=document.forms[form].usernameLoginUser；
var password=document.forms[form].passwordLoginUser；
if（userType.selectedIndex<1）
{
警报（“请选择用户类型”）；
userType.focus（）；
返回false；
}
if（environment.selectedIndex<1）
{
警报（“请选择环境”）；
focus（）；
返回false；
}
如果（browser.selectedIndex<1）
{
警告（“请选择浏览器”）；
focus（）；
返回false；
}
如果（username.value==“”）
{
window.alert（“请输入用户名”）；
username.focus（）；
返回false；
}

..
..
..
..
..

谢谢！实际上我的HTML（select name=“environment”中的额外空间）确实犯了一个错误。最终通过chrome控制台调试器解决了。谢谢！这是我的错误。我将使用“this”。