Question

我在一个页面中有多个表单。一些元素/字段对于所有表单都是通用的，并且其中一些对于每个表单都是唯一的。我需要验证所有表单，我想使用单个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;
}

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>

Answer 1

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

很高兴你得到了它的工作。我把代码改成了一点，看起来像这样：

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

我以为我还会发布，以防万一。我认为随着你的进一步发展，你会想要在对它们做任何事情之前测试表格变量的存在。

Answer 2

尝试以下代码

＆＃13;

    function validateForms(form){
        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)
        {
            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;
        }

＆＃13;

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

＆＃13;

我添加了属性method="post"并更改了action="#"。您也可以使用this代替onsubmit="return validateForms(this)"

之类的名称

纯JS：多表单验证，包含一些常见的字段/元素和一些独特的字段/元素

2 个答案: