提交JavaScript表单验证时页面重置

Question

我正在学习JavaScript，并在表单验证中做了一个简单的项目。 但是，当我单击按钮时，页面将重置。 但是我想在某些字段为空时显示一些警报文本。但是当我使用按钮提交表单时，页面会快速重置。 它显示警报文本数毫秒，并重置页面。 请查看我的代码并帮助我修复它。我正在学习JavaScript。 因此，请帮助我修复它。

创建您的帐户

<style>

    body  {background-color: darksalmon;}

    h1  {text-align: center;
         font-family: sans-serif;
         color:darkcyan;
         margin-top: 75px;
    }

    #container  {width: 270px;
                 height: 500px;
                 position: relative;
                 margin: auto;
                 font-family:sans-serif;
                 font-weight: bold;
                 color:dimgray;
    }

    #myButton   {position:relative;
                 width: 125px;  
                 height: 40px;
                 left: 70px;
                 background-color:aquamarine;
                 border: 1px solid dimgray;
                 font-family: sans-serif;
                 font-weight: bold;
                 color: dimgray;
    }

    #myButton:hover {background-color: dimgray;
                    color: aquamarine;
    }

    .paraStyle  {
            font-size: 12px;
            margin-left: 95px;
            color: red;
            display: none;
    }

</style>

<h1>Create Your Account Here</h1>
<div id="container">

    <form name="form1" onsubmit="validate()"  id="myForm">

    First Name: <input type="text" name="firstName">
    <br>
    <p class="paraStyle" id="para1">This Field Is Required</p>
    <br>
    Last Name: <input type="text" name="lastName">
    <br>
    <p class="paraStyle" id="para2">This Field Is Required</p>
    <br>
    Email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;<input type="email" name="email">
    <br>
    <p class="paraStyle" id="para3">This Field Is Required</p>
    <br>
    Phone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;<input type="text" name="phone">
    <br>
    <p class="paraStyle" id="para4">This Field Is Required</p>
    <p class="paraStyle" id="para7">Please Enter phone Number In Format</p>
    <br>
    Password&nbsp;:&nbsp;<input type="password" name="password1">
    <br>
    <p class="paraStyle" id="para5">This Field Is Required</p>
    <p class="paraStyle" id="para8">Password Must Be Atleast 5 Charactors</p>
    <br>
    Re-Enter&nbsp;&nbsp;&nbsp;:&nbsp;<input type="password" name="password2">
    <br>
    <p class="paraStyle" id="para6">This Field Is Required</p>
    <p class="paraStyle" id="para9">Please Enter The Same Password</p>
    <br>
    <br>
    <button type="submit" id="myButton">Create Account</button>
    </form>



    <script type="text/javascript">

            e=document.form1.password1.value;
            f=document.form1.password2.value;

        function validate() {
            x=document.form1.firstName.value;
            y=document.form1.lastName.value;
            z=document.form1.email.value;
            b=document.form1.phone.value;
            c=document.form1.password1.value;
            d=document.form1.password2.value;

            if(x==""){
            document.getElementById("para1").style.display="block"
            }

            if(y==""){ 
            document.getElementById("para2").style.display="block"}

            if(z==""){
            document.getElementById("para3").style.display="block"}

            if(b==""){
            document.getElementById("para4").style.display="block"}

            else if(isNaN(b)){
            document.getElementById("para7").style.display="block"}

            else if(b.length !=10){
            document.getElementById("para7").style.display="block"}

            if(c==""){
            document.getElementById("para5").style.display="block"}

            else if(c.length <=5){
            document.getElementById("para8").style.display="block"}

            else if(d==""){
            document.getElementById("para5").style.display="block"}

            else if(e==f){document.getElementById("para9").style.display="block"}


        }


    </script>


</div>

Answer 1

使用onsubmit =“ return validate（）;” 在表单标签中您错过了表单标签中的返回部件。 还要在您的javascript函数中添加返回值。 仅当所有条件都成立时才返回true。 否则返回false。 如果返回false，则不会提交表格。 否则它将提交。 （）