Question

下面的代码段是我从html源中获取的

<FORM id=SubmitLogon method=post name=submitLogonForm action=/MyLogin/SubmitLogon.do;jsessionid=reQYQqPCZt_6Oc3EkU66XFiC-fWQQ2DHPdCgWYwR5TbT9xsXOsPe!907086402 AutoComplete="off">



    <TR>
        <TD class=logonLabelTdTag>Username&nbsp; </TD>
        <TD align=left>
            <DIV id=wwgrp_username_Id class=wwgrp>
                <DIV id=wwctrl_username_Id class=wwctrl>
                    <INPUT onchange="javascript: this.value=this.value.toUpperCase();" tabIndex=1 onfocus="javascript: this.value=this.value.toUpperCase();" id=username_Id class=logonTextBox maxLength=40 name=username>
                    </DIV>
                </DIV>
            </TD>
        </TR>


        <TR>
            <SCRIPT language=JavaScript1.2 type=text/javascript>
                       $(document).ready(function () {
                    try {
                       $("input[type='text']").each(function(){
                           $(this).attr("autocomplete","off");
                        });
                       }
                   catch (e)
                   { }
                  });
            </SCRIPT>

            <TD class=logonLabelTdTag>Password&nbsp; </TD>
            <TD align=left>
                <DIV id=wwgrp_password_Id class=wwgrp>
                    <DIV id=wwctrl_password_Id class=wwctrl>
                        <INPUT tabIndex=2 id=password_Id class=logonTextBox maxLength=40 type=password value="" name=password>
                        </DIV>
                    </DIV>
                </TD>
            </TR>



            <TR>
                <TD colSpan=2 align=right>
                    <BUTTON onclick=validateLoginCredentials() style="BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 39px; WIDTH: 98px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none" type=submit value="Loginn">
                        <IMG src="https://den02qoj.us.oracle.com/images/btn_login.jpg">
                        </BUTTON>
                    </TD>
                </TR>


            </FORM>

<script>
                function validateLoginCredentials(){
                    alert('invoked');

                    var usernameVar = document.getElementById("username_Id").value;
                    var passwordVar = document.getElementById("password_Id").value;
                    //validationIdd_user
                    //validationIdd_password

                    alert('usernameVar is:'+usernameVar);
                    alert('passwordVar is:'+passwordVar);

                    alert('usernameVar length is:- '+usernameVar.length);
                    alert('passwordVar length is:- '+passwordVar.length);

                    document.getElementById("validationIdd").style.visibility = 'hidden';
                    document.getElementById("validationIdd_user").style.visibility = 'hidden';
                    document.getElementById("validationIdd_password").style.visibility = 'hidden';

                    if(usernameVar == '' && passwordVar == ''){
                        document.getElementById("validationIdd").style.display='';
                        alert('517-false');
                        return false;
                    }else if(usernameVar == '' || usernameVar == null){
                        document.getElementById("validationIdd").style.visibility = 'hidden';
                        document.getElementById("validationIdd_password").style.visibility = 'hidden';
                        document.getElementById("validationIdd_user").style.display='';
                        alert('523-false');
                        return false;
                    }else if(passwordVar == '' || passwordVar == null){
                        document.getElementById("validationIdd_password").style.display='';
                        alert('527-false');
                        return false;
                    }else{
                        alert('530-true submitting now----------------');
                        document.getElementById('SubmitLogon').submit() 
                        return true;   
                    }
                    alert('validateLoginCredentials:end');
                }
            </script>

首次单击“提交”按钮 当用户名（id：username_Id）和密码（id：password_Id）均为空时，JS函数validateLoginCredentials（）返回false，我已通过alert('517-false');进行了验证，但表单已提交

再次点击第二次提交按钮 username（id：username_Id）和password（id：password_Id）均为空，调用了JS函数validateLoginCredentials（），但未进入下面的代码块（这是我上面描述的第一种情况）

if(usernameVar == '' && passwordVar == ''){
                        document.getElementById("validationIdd").style.display='';
                        alert('517-false');
                        return false;
                    }

为什么相同（以上）方案的结果不同？以及为什么在第一种情况下即使JS函数返回false仍要提交表单

感谢您阅读问题，请帮助我

Answer 1

您必须将检查功能放在表单标签中，而不是在类似

的按钮中

<FORM id=SubmitLogon method=post onsubmit="return validateLoginCredentials()" name=submitLogonForm action=/MyLogin/SubmitLogon.do;jsessionid=reQYQqPCZt_6Oc3EkU66XFiC-fWQQ2DHPdCgWYwR5TbT9xsXOsPe!907086402 AutoComplete="off">

即使JS函数返回false，表单也会被提交

1 个答案: