Question

我试图比较表单中的2个输入值，以检查它们是否相同。最后，我想在提交时阻止默认操作，但我现在只是为了更轻松地检查我是否正在捕获正确的信息。

＆＃13;

// store password inputs as variables
$('#password1').keyup(function() {
  var value1 = $("#password1").val();
  $("#password1").val(value1);
});

$('#password2').keyup(function() {
  var value2 = $("#password2").val();
  $("#password2").val(value2);
});

//  check if passwords match

$('#validate').on('submit', function() {
  if (value1 = value2) {
    alert("Yes they match")
  } else {
    alert("Passwords do not match")
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="form-group">
      <i class="fa fa-key" aria-hidden="true"></i>
      <label for="password1">Password</label>
      <input id="password1" type="password" class="form-control" placeholder="Enter password" name="password1">
    </div>
    <div class="form-group">
      <i class="fa fa-key" aria-hidden="true"></i>
      <label for="password2">Confirm password</label>
      <input id="password2" type="password" class="form-control" placeholder="Enter password" name="password">
    </div>
    <div class="form-group">
      <i class="fa fa-picture-o" aria-hidden="true"></i>
      <label for="img">Image</label>
      <input type="text" class="form-control" placeholder="Enter image URL" name="image">
    </div>
    <button id="submit-login" type="submit" class="btn btn-primary btn-lg">Signup</button>
  </form>
</div>
<button id="validate">Validate</button>

＆＃13;

然而它不起作用。我尝试将一个console.log添加到我试图捕获输入的代码中，它确实存储了日志，但它似乎没有存储我认为可能导致此问题的最终值。 / p>

Answer 1

您的问题是因为value1和value2变量不在submit事件处理程序的范围内。您可以通过阅读val()事件处理程序中的submit元素来解决此问题并简化逻辑。

此外，您需要使用==或===进行比较。 =用于设置值。 #validate元素是一个按钮，不会引发submit事件 - 您需要将其放在form元素上，尽管可能需要在submit元素下运行此逻辑{1}}和form按钮的click {1}}。考虑到所有这一切，试试这个：

#validate

$('form').on('submit', validate);
$('#validate').on('click', validate)
   
function validate(e) {
  e.preventDefault(); // stop the submission in this demo

  if ($("#password1").val() == $("#password2").val()) {
    alert("Yes they match")
  } else {
    alert("Passwords do not match")
  }
}

Answer 2

将value1和value2移出密钥功能，然后可以从验证中访问

var value1 = "";
var value2 = "";
// store password inputs as variables
$('#password1').keyup(function() {

var value1 = "";
var value2 = "";
// store password inputs as variables
$('#password1').keyup(function() {
  value1 = $("#password1").val();
  $("#password1").val(value1);
});

$('#password2').keyup(function() {
  value2 = $("#password2").val();
  $("#password2").val(value2);
});

//  check if passwords match

$('#validate').on('click', function() {
  if (value1 == value2 && value1.length > 0 && value2.length > 0) {
    alert("Yes they match")
  } else {
    alert("Passwords do not match")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <i class="fa fa-key" aria-hidden="true"></i>
  <label for="password1">Password</label>
  <input id="password1" type="password" class="form-control" placeholder="Enter password" name="password1">
</div>
<div class="form-group">
  <i class="fa fa-key" aria-hidden="true"></i>
  <label for="password2">Confirm password</label>
  <input id="password2" type="password" class="form-control" placeholder="Enter password" name="password">
</div>
<div class="form-group">
  <i class="fa fa-picture-o" aria-hidden="true"></i>
  <label for="img">Image</label>
  <input type="text" class="form-control" placeholder="Enter image URL" name="image">
</div>
<button id="submit-login" type="submit" class="btn btn-primary btn-lg">Signup</button>
</form>
</div>
<button id="validate">Validate</button>

Answer 3

您无需为每个输入更改设置变量
您需要在==声明

===

if

您必须使用click事件按钮#validate而不是submit

- 试试我的改变！希望这可以提供帮助！

//  check if passwords match

$('#validate').on('click', function() {
 var value1 = $("#password1").val(),
    value2 = $("#password2").val();
  if (value1 == value2) {
    alert("Yes they match")
  } else {
    alert("Passwords do not match")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="form-group">
      <i class="fa fa-key" aria-hidden="true"></i>
      <label for="password1">Password</label>
      <input id="password1" type="password" class="form-control" placeholder="Enter password" name="password1">
    </div>
    <div class="form-group">
      <i class="fa fa-key" aria-hidden="true"></i>
      <label for="password2">Confirm password</label>
      <input id="password2" type="password" class="form-control" placeholder="Enter password" name="password">
    </div>
    <div class="form-group">
      <i class="fa fa-picture-o" aria-hidden="true"></i>
      <label for="img">Image</label>
      <input type="text" class="form-control" placeholder="Enter image URL" name="image">
    </div>
    <button id="submit-login" type="submit" class="btn btn-primary btn-lg">Signup</button>
  </form>
</div>
<button id="validate">Validate</button>

将输入值存储为变量然后进行比较

3 个答案: