验证期间出现Javascript错误

问题描述 投票：1回答：5

我想在点击提交按钮时验证表单。在这种情况下，表单是提交，如果验证返回错误。我不太了解js。任何帮助都很明显。

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}
<form action="<?php echo site_url().'/login_controller/registration' ?>" role="form" enctype="multipart/form-data" onsubmit='check();' method="POST">
  <div class="form-group">
    <label><b>Password</b></label>
    <input type="password" class="form-control" placeholder="Password" id="password" name="psw" required>

  </div>
  <div class="form-group">
    <label><b>Repeat Password</b></label>
    <input type="password" class="form-control" placeholder="Repeat Password" id="confirm_password" name="rpsw" required>
    <span id='message'></span>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="submit" value="save">
  </div>
</form>
javascript jquery
5个回答
1
投票

当e.preventDefault();不匹配时使用password。

$('form').submit(function(e){

  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
    e.preventDefault();
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" role="form" enctype="multipart/form-data" method="POST">
  <div class="form-group">
    <label><b>Password</b></label>
    <input type="password" class="form-control" placeholder="Password" id="password" name="psw" required>

  </div>
  <div class="form-group">
    <label><b>Repeat Password</b></label>
    <input type="password" class="form-control" placeholder="Repeat Password" id="confirm_password" name="rpsw" required>
    <span id='message'></span>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="submit" value="save">
  </div>
</form>
2
投票

您需要从true函数返回false或check()，以指示是继续还是阻止表单提交。

这是更新的check()功能。

var check = function() {
      if (document.getElementById('password').value ==
          document.getElementById('confirm_password').value) {
          document.getElementById('message').style.color = 'green';
          document.getElementById('message').innerHTML = 'matching';
          return true;
      } else {
          document.getElementById('message').style.color = 'red';
          document.getElementById('message').innerHTML = 'not matching';
          return false;
      }
  }
<form action="<?php echo site_url().'/login_controller/registration' ?>" role="form" enctype="multipart/form-data" onsubmit='return check();' method="POST">
<div class="form-group">
    <label><b>Password</b></label>
    <input type="password" class="form-control" placeholder="Password" id="password" name="psw" required>

  </div>
  <div class="form-group">
    <label><b>Repeat Password</b></label>
    <input type="password" class="form-control" placeholder="Repeat Password" id="confirm_password" name="rpsw" required>
    <span id='message'></span>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="submit" value="save">
  </div>
</form>

这是html中的附加更新。在表格开头标记中用onsubmit='check();'替换onsubmit='return check();'。

1
投票
  1. 永远不要在表单中调用任何提交内容，它会隐藏提交事件处理程序
  2. 你需要使用onsubmit="return check()"然后
  3. 从函数返回false。
var check = function() {
  if (document.getElementById('password').value ==
      document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'green';
      document.getElementById('message').innerHTML = 'matching';
      return true;
  }
  // no need for else after a return:
  document.getElementById('message').style.color = 'red';
  document.getElementById('message').innerHTML = 'not matching';
  return false;
}

通常最好使用不引人注目的编码，因此请为表单提供ID并尝试

window.onload=function() {
  document.getElementById("myForm").onsubmit=function() {
    if (document.getElementById('password').value ==
      document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'green';
      document.getElementById('message').innerHTML = 'matching';
      return true;
    }
    // no need for else after a return:
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
    return false;
  }
}
0
投票

修改您的脚本如下：

var check = function() {

  var error_flag = true;    

  if (document.getElementById('password').value == document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'green';
      document.getElementById('message').innerHTML = 'matching';
      error_flag = true;
  } else {
      document.getElementById('message').style.color = 'red';
      document.getElementById('message').innerHTML = 'not matching';
      error_flag = false;
  }

  return error_flag
}

这里也有点调整：onsubmit='return check();'

<form action="<?php echo site_url().'/login_controller/registration' ?>" role="form" enctype="multipart/form-data" onsubmit='return check();' method="POST">
0
投票

对于表单验证，使用Jquery验证插件更好。它非常简单，需要包含Jquery库。试试这个https://jqueryvalidation.org/。请参考这个js小提琴也https://jsfiddle.net/jfc62uof/6/

    <form action="javascript:void(0)" id="myform" role="form" enctype="multipart/form-data" method="POST">
      <div class="form-group">
        <label><b>Password</b></label>
        <input type="password" class="form-control" placeholder="Password" name="psw" id="psw">

      </div>
      <div class="form-group">
        <label><b>Repeat Password</b></label>
        <input type="password" class="form-control" placeholder="Repeat Password" name="rpsw">
        <span id='message'></span>
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-primary" name="submit" value="save">
      </div>
    </form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
    <script>

        $("#myform").validate({
          rules: {
            psw: {
              required: true
            },
            rpsw: {
              equalTo: "#psw"
            }

          }
        });
    </script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.