我可以用这个 JavaScript 验证两个字段而不是一个字段吗？

Question

我使用下面的 javascript 来验证表单上的 Phone 数字字段，方法是每当用户在我的 phone 数字字段中输入值时显示下一个隐藏字段表单与我的 javascript.

中的值匹配

但是，如果他们的输入与我 javascript 中的值不匹配，隐藏字段将保持隐藏状态，用户将无法提交表单。

javascript 适用于 phone 字段，但我正在尝试验证两个不同的字段以匹配我的 javascript.

中的值

例如， 我想让用户在 phone 字段和表单的电子邮件字段中输入的值与 [=73] 中的值匹配=] 在隐藏字段显示之前。

下图；

比方说，我的 javascript 中的值是； if (phone === "12345" && email === "12345@gmail.com")

如果用户输入 Phone：12345 和他们的电子邮件：12345@gmail.com，隐藏字段显示.

如果用户输入 Phone:123 和他们的电子邮件：12345@gmail.com，隐藏字段保持隐藏状态.

我尝试了不同的解决方案来验证 phone 和电子邮件字段，但我的所有解决方案都失败了，我需要一些帮助。

抱歉，如果我下面的解决方案很差，但我不是原始代码的所有者。

感谢您的帮助。

下面是我的 phone 字段验证示例代码。（工作正常！）

$('.validate').hide();
$('body').on('blur', '#phone', function() {
  var value = $(this).val();
  if (isPhoneInUse(value)) {
    $(".validate").show();
  } else {
  alert ("Phone do not match!\nYou cannot submit this form!");
    $(".validate").hide();
  }
});
$('#submitForm').on('submit', function(e) {
  var value = $("#phone").val();
  if (isPhoneInUse(value)) {
    // validation failed. cancel the event
    console.log("not submitting");
    return false;
  }
})

function isPhoneInUse(phone) {
  return (phone === "1234" || phone === "23456")
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="submitForm">
<div class="validate"><span style="color: red;"><b>Phone Matches!</b></span></div>

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />

  <br/><br/>
<div class="validate">
  <button href='/' type='submit' id="submitForm">Submit</button>
</div>
</form>

下面是我验证 phone 和电子邮件字段的解决方案。（不工作！）

$('.validate').hide();
$('body').on('blur', '#phone', '#email', function() {
var value = $(this).val();
  if (isDataInUse( $("#phone").val(), $("#email").val() )) {
    $(".validate").show();
  } else {
  alert ("Phone and Email do not match!\nYou cannot submit this form!");
    $(".validate").hide();
  }
});
$('#submitForm').on('submit', function(e) {
  var value = $("#phone" && "#email".val());
  if (isDataInUse( $("#phone").val(), $("#email").val() )) {
    // validation failed. cancel the event
    console.log("not submitting");
    event.preventDefault();
  }
})

function isDataInUse(phone, email) { 
return (phone === "1234" && email === "1234@gmail.com") 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="submitForm">
<div class="validate"><span style="color: red;"><b>Phone and Email Matches!</b></span></div>

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />
  <br/><br/>
    <input type="email" name='email' required='' id="email" placeholder="hello@youremail.com" />

  <br/><br/>
<div class="validate">
  <button href='/' type='submit' id="submitForm">Submit</button>
</div>
</form>

Answer 1

经过多次更正，这里是一个工作片段：

$('.validate').hide();

$('#phone, #email').on('change', function() {
  let phone = $('#phone').val();
  let email = $('#email').val();
  if (isDataInUse(phone, email)) {
    $(".validate").show();
  } else {
  alert ("Phone or Email do not match!\nYou cannot submit this form!");
    $(".validate").hide();
  }
});

$('#theForm').on('submit', function(e) {
  let phone = $('#phone').val();
  let email = $('#email').val();
  if (isDataInUse(phone, email)) {
    // validation failed. cancel the event
    console.log("not submitting");
    e.preventDefault();
    return false;
  }
})

function isDataInUse(phone, email) {
  return (phone === "1234" && email === "1234@gmail.com")
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="theForm">
<div class="validate"><span style="color: red;"><b>Phone and Email Matches!</b></span></div>

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />
  <br/><br/>
    <input type="email" name='email' required='' id="email" placeholder="hello@youremail.com" />

  <br/><br/>
<div class="validate">
  <button href='/' type='submit' id="submitForm">Submit</button>
</div>
</form>

我可以用这个 JavaScript 验证两个字段而不是一个字段吗？

Can I Validate Two Fields Instead of One Field With This JavaScript?

javascript

forms

validation