用户名和密码为空时，如何在单击“登录”按钮时停止重定向？

时间：2018-10-29 19:03:38

标签： javascript jquery html css

JavaScript Jquery专家，

我需要一点帮助。

这是我的代码，当我单击登录按钮时未在用户名和密码中输入任何值时，它显示消息“所有字段均为必填”，但此消息立即消失，并显示意外的消息，如单击时看到的那样在登录按钮上。

现在我想要什么？我想要当它显示“所有字段都是必需的”时，此消息应该是稳定的，不要重定向到其他意外消息。

还要在jsfiddle中检查：https://jsfiddle.net/m1aaaqo9/14/

1：单击jsfiddle中的登录按钮时，它会重定向到以下消息： {“错误”：“键缺失：标题”}

2：我也在页面上输入了相同的编码：https://testjsvascripts.blogspot.com/p/javascript-test.html

现在，当您单击我给定页面上的登录名时，它将重定向以显示此消息“方法不允许错误405 ”，并在我不需要的url中的.html之后添加＃。 / p>

3：同样，当您单击此处的运行片段并单击登录，而未在用户名和密码字段中输入任何值时，它将显示此消息“自定义错误模块无法识别此错误。”

所以我的问题是：我只想显示此消息“所有字段都是必需的”，多数民众赞成在..应该没有进一步的重定向....所以如何在我的代码中修复它。 ？

jQuery(document).ready(function($){
            $("#submit").click(function(){
                var name= $("#name").val();
                var pass = $("#pass").val();
                if(name == '' || pass == ''){
                    $("#Required").html("All Fields Are Required").css("color","red");
                }else if(name == "admin" && pass == "123"){
                     $("#form").html('<h4>User Login Successfully</h4><a href="">Back</a>').css('color','green');
                }else{
                     $("#error").html("User Are Not Valid");
                }
            });
        });
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Validation Form</title>
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
<body>
<div class="container">
    <h1>Login Form</h1>
    <span>Name:admin</span>
    <span>password:123</span>
    <div class="row">
        <div class="col-md-4">
            <form action="#" method="post" class="form-box" id="form">
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
                </div>

                <div class="form-group">
                    <input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
                    <span id="Required" style="color:#ff0000;"></span>
                </div>
                <span id="error" style="color:#ff0000"></span>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  </body>
</html>

2 个答案:

答案 0 :(得分：0)

jQuery(document).ready(function($){
            $("#submit").click(function(){
                var name= $("#name").val();
                var pass = $("#pass").val();
                if(name == '' || pass == ''){
                    $("#Required").html("All Fields Are Required").css("color","red");
                }else if(name == "admin" && pass == "123"){
                     $("#form").html('<h4>User Login Successfully</h4><a href="">Back</a>').css('color','green');
                }else{
                     $("#error").html("User Are Not Valid");
                }
                return false;
            });
        });
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Validation Form</title>
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
<body>
<div class="container">
    <h1>Login Form</h1>
    <span>Name:admin</span>
    <span>password:123</span>
    <div class="row">
        <div class="col-md-4">
            <form action="#" method="post" class="form-box" id="form">
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
                </div>

                <div class="form-group">
                    <input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
                    <span id="Required" style="color:#ff0000;"></span>
                </div>
                <span id="error" style="color:#ff0000"></span>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  </body>
</html>

答案 1 :(得分：0)

jQuery(document).ready(function($){
            $("#submit").click(function(){
                var name= $("#name").val();
                var pass = $("#pass").val();
                if(name == '' || pass == ''){
                    $("#Required").html("All Fields Are Required").css("color","red");
                }else if(name == "admin" && pass == "123"){
                     $("#form").html('<h4>User Login Successfully</h4><a href="">Back</a>').css('color','green');
                }else{
                     $("#error").html("User Are Not Valid");
                }
            });
        });
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Validation Form</title>
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
<body>
<div class="container">
    <h1>Login Form</h1>
    <span>Name:admin</span>
    <span>password:123</span>
    <div class="row">
        <div class="col-md-4">
            <form action="#" method="post" class="form-box" id="form">
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
                </div>

                <div class="form-group">
                    <input type="button" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
                    <span id="Required" style="color:#ff0000;"></span>
                </div>
                <span id="error" style="color:#ff0000"></span>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  </body>
</html>

相关问题
最新问题