javascript按钮在html中不起作用_Javascript_Jquery_Html

javascript按钮在html中不起作用

javascript jquery html

javascript按钮在html中不起作用,javascript,jquery,html,Javascript,Jquery,Html,我目前还不熟悉网络开发。我忽略了这个代码，直到我头疼。有人知道为什么点击登录按钮什么都不做吗 function validate() { if( validateEmail(document.myForm.login.value)!==true ) { alert( "Please provide your valide email address!" ); document.myForm.login.focus() ; return false; }

我目前还不熟悉网络开发。我忽略了这个代码，直到我头疼。有人知道为什么点击登录按钮什么都不做吗

    function validate()
{
  if( validateEmail(document.myForm.login.value)!==true )
  {
    alert( "Please provide your valide email address!" );
    document.myForm.login.focus() ;
    return false;
  }

  if(form.password.value.length < 6) {
    alert("Error: Password must contain at least six characters!");
    form.password.focus();
    return false;
  }
  if(form.password.value == form.login.value) {
    alert("Error: Password must be different from Username!");
    form.password.focus();
    return false;
  }
  re = /[0-9]/;
  if(!re.test(form.password.value)) {
    alert("Error: password must contain at least one number (0-9)!");
    form.password.focus();
    return false;
  }
  re = /[a-z]/;
  if(!re.test(form.password.value)) {
    alert("Error: password must contain at least one lowercase letter (a-z)!");
    form.password.focus();
    return false;
  }
  re = /[A-Z]/;
  if(!re.test(form.password.value)) {
    alert("Error: password must contain at least one uppercase letter (A-Z)!");
    form.password.focus();
    return false;
  }
  else {
    alert("Error: Please check that you've entered and confirmed your password!");
    form.password.focus();
    return false;
  }
  return true; 
}

function validateEmail(email) {   
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}


var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function doLogin(){
  if(validate()){
    var username = document.getElementById("login").value;
    var password = document.getElementById("password").value;
    if ( username == "admin@website.co.za" && password == "Password1"){
      alert ("Login successfully");
      window.location = "session.php"; // Redirecting to other page.
      return false;
    }
    else{
      attempt--;// Decrementing by one.
      alert("You have left "+attempt+" attempt;");
      // Disabling fields after 3 attempts.
      if( attempt === 0){
        document.getElementById("login").disabled = true;
        document.getElementById("password").disabled = true;
        document.getElementById("submit").disabled = true;
        return false;
      }
    }
  }
}

函数验证（）
{
if（validateEmail（document.myForm.login.value）！==true）
{
提醒（“请提供您的valide电子邮件地址！”）；
document.myForm.login.focus（）；
返回false；
}
if（form.password.value.length<6）{
警报（“错误：密码必须至少包含六个字符！”）；
form.password.focus（）；
返回false；
}
if（form.password.value==form.login.value）{
警报（“错误：密码必须与用户名不同！”）；
form.password.focus（）；
返回false；
}
re=/[0-9]/；
if（！re.test（form.password.value））{
警报（“错误：密码必须至少包含一个数字（0-9）！”；
form.password.focus（）；
返回false；
}
re=/[a-z]/；
if（！re.test（form.password.value））{
警告（“错误：密码必须至少包含一个小写字母（a-z）！”；
form.password.focus（）；
返回false；
}
re=/[A-Z]/；
if（！re.test（form.password.value））{
警告（“错误：密码必须至少包含一个大写字母（A-Z）！”；
form.password.focus（）；
返回false；
}
否则{
警报（“错误：请检查您是否输入并确认了密码！”）；
form.password.focus（）；
返回false；
}
返回true；
}
功能验证邮件（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
}
变量尝试=3；//用于计算尝试次数的变量。
//单击“登录”按钮即可执行下面的函数。
函数doLogin（）{
if（validate（））{
var username=document.getElementById（“登录”）.value；
var password=document.getElementById（“密码”）.value；
如果（用户名=”admin@website.co.za“&&password==”Password1“）{
警报（“登录成功”）；
window.location=“session.php”；//重定向到其他页面。
返回false；
}
否则{
尝试--；//递减一。
警报（“您已离开“+尝试+”尝试；”；
//尝试3次后禁用字段。
如果（尝试===0）{
document.getElementById（“login”）.disabled=true；
document.getElementById（“密码”）.disabled=true；
document.getElementById（“提交”）.disabled=true；
返回false；
}
}
}
}

^^javascript

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="styles\login_Style.css">
    <title>Log In</title>
  </head>
  <body>
    <div class="container">
      <div class="login">
        <h1>Login</h1>
        <form name="myForm" method="post" action="">
          <p>
            <input type="text" name="login" value="" placeholder="Email Address">
          </p>
          <p>
            <input type="password" name="password" value="" placeholder="Password">
          </p>
          <p class="submit">
            <button type="button" name="commit" value="Login" onclick="doLogin()">Login</button>
          </p>

          <p class="submit">
            <button type="button" name="back" value="back" onclick="document.location.href='home-page.html';">Back To Home Page</button>
          </p>
        </form>
      </div>
    </div>
<script></script>
</body>
</html>


登录
登录





登录


返回主页

^^html按钮。请注意，脚本位于主体关闭的正上方。

因为验证是一个您应该像这样使用的函数

 function doLogin(){
      if(validate()){

目前，您正在将其用作变量

我已经编辑了小提琴里面的代码。看这个。

尝试下面更新的HTML代码

<p class="submit"><button type="button" name="commit" value="Login" onclick="javascript:doLogin()">Login</button></p>

并确保

doLogin

函数中的

validate

变量具有有效值，如

true/false

尝试复制并粘贴此变量，您应该更接近于解决问题。我在代码中加入了一些注释，以帮助您理解我所做的事情

    <!DOCTYPE html>
<html>
<head>
    <!--You need to reference these scripts to actually use any validation.-->
    <script src="lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <!--End Script reference-->
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="styles\login_Style.css">
    <title>Log In</title>
</head>
<body>
    <script>
        function validate() {
            if (validateEmail(document.myForm.login.value) !== true) {
                alert("Please provide your valid email address!");
                document.myForm.login.focus();
                return false;
            }

            if (myForm.password.value.length < 6) {
                alert("Error: Password must contain at least six characters!");
                form.password.focus();
                return false;
            }
            if (myForm.password.value == myForm.login.value) {
                alert("Error: Password must be different from Username!");
                form.password.focus();
                return false;
            }
            re = /[0-9]/;
            if (!re.test(myForm.password.value)) {
                alert("Error: password must contain at least one number (0-9)!");
                form.password.focus();
                return false;
            }
            re = /[a-z]/;
            if (!re.test(myForm.password.value)) {
                alert("Error: password must contain at least one lowercase letter (a-z)!");
                form.password.focus();
                return false;
            }
            re = /[A-Z]/;
            if (!re.test(myForm.password.value)) {
                alert("Error: password must contain at least one uppercase letter (A-Z)!");
                form.password.focus();
                return false;
            }
            //Your else function was returning false therefore when you did actually validate you would always get false and never actually validate
            else {
                return true;
            }
        }

        function validateEmail(email) {
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }


        var attempt = 3; // Variable to count number of attempts.
        // Below function Executes on click of login button.
        function doLogin() {
            if (validate()) {
                var username = document.getElementById("login").value;
                var password = document.getElementById("password").value;
                if (username == "admin@website.co.za" && password == "Password1") {
                    alert("Login successfully");
                    window.location = "session.php"; // Redirecting to other page.
                    return false;
                }
                else {
                    attempt--;// Decrementing by one.
                    alert("You have left " + attempt + " attempt;");
                    // Disabling fields after 3 attempts.
                    if (attempt === 0) {
                        document.getElementById("login").disabled = true;
                        document.getElementById("password").disabled = true;
                        document.getElementById("submit").disabled = true;
                        return false;
                    }
                }
            }
        }
    </script>

    <div class="container">
        <div class="login">
            <h1>Login</h1>
            <!--onsubmit it will call the function doLogin() and the action attribute will redirect to session.php-->
            <form name="myForm" method="post" onsubmit="doLogin()" action="session.php">
                <p>
                    <!--Use Id to tag the elements that are getElementById-->
                    <input type="text" name="login" id="login" placeholder="Email Address">
                </p>
                <p>
                    <!--Use Id to tag the elements that are getElementById-->
                    <input type="password" name="password" id="password" placeholder="Password">
                </p>
                <p class="submit">
                    <!--Use Id to tag the elements that are getElementById-->
                    <!--Also the button type should be submit and id also submit-->
                    <button type="submit" name="commit" id="submit">Login</button>
                </p>

                <p class="submit">
                    <!--This is how I would do the back to home page button. It still should appear as a button-->
                    <a type="button" href="http://yoursite.com/home-page.html">Back To Home Page</a>
                </p>
            </form>
        </div>
    </div>


</body>
</html>


登录
函数验证（）{
if（validateEmail（document.myForm.login.value）！==true）{
提醒（“请提供您的有效电子邮件地址！”）；
document.myForm.login.focus（）；
返回false；
}
if（myForm.password.value.length<6）{
警报（“错误：密码必须至少包含六个字符！”）；
form.password.focus（）；
返回false；
}
if（myForm.password.value==myForm.login.value）{
警报（“错误：密码必须与用户名不同！”）；
form.password.focus（）；
返回false；
}
re=/[0-9]/；
if（！re.test（myForm.password.value））{
警报（“错误：密码必须至少包含一个数字（0-9）！”；
form.password.focus（）；
返回false；
}
re=/[a-z]/；
if（！re.test（myForm.password.value））{
警告（“错误：密码必须至少包含一个小写字母（a-z）！”；
form.password.focus（）；
返回false；
}
re=/[A-Z]/；
if（！re.test（myForm.password.value））{
警告（“错误：密码必须至少包含一个大写字母（A-Z）！”；
form.password.focus（）；
返回false；
}
//您的else函数返回false，因此当您实际验证时，您将始终得到false，并且永远不会实际验证
否则{
返回true；
}
}
功能验证电子邮件（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
}
变量尝试=3；//用于计算尝试次数的变量。
//单击“登录”按钮即可执行下面的函数。
函数doLogin（）{
if（validate（））{
var username=document.getElementById（“登录”）.value；
var password=document.getElementById（“密码”）.value；
如果（用户名=”admin@website.co.za“&&password==”Password1“）{
警报（“登录成功”）；
window.location=“session.php”/