我可以使用這個JavaScript驗證兩個欄位而不是一個欄位嗎？

只要用戶在表單上的電話號碼欄位中輸入的值與我的 javascript 中的值匹配，我就會使用下面的 javascript 通過顯示下一個隱藏欄位來驗證表單上的電話號碼欄位。

但是，如果他們的輸入與我的 javascript 中的值不匹配，則隱藏欄位將保持隱藏狀態，用戶將無法提交表單。

javascript 適用于電話欄位，但我正在嘗試驗證兩個不同的欄位以匹配我的 javascript 中的值。

例如，我想讓用戶在電話欄位和表單的電子郵件欄位中輸入的值與我的 javascript 中的值在隱藏欄位顯示之前匹配。

下圖；

可以說，我的javascript中的值是；如果（電話===“12345”&&電子郵件===“[email protected]”）

如果用戶輸入電話：12345 和他們的電子郵件：[email protected]，隱藏欄位顯示。

如果用戶輸入電話：123 和他們的電子郵件：[email protected]，隱藏欄位保持隱藏。

我嘗試了不同的解決方案來驗證電話和電子郵件欄位，但我所有的解決方案都失敗了，我需要一些幫助。

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

謝謝你的幫助。

下面是我的電話欄位驗證示例代碼。（作業正常！）

$('.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>

以下是我驗證電話和電子郵件欄位的解決方案。（不作業！）

$('.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 === "[email protected]") 
}

<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="[email protected]" />

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

uj5u.com熱心網友回復：

經過多次更正，這是一個作業片段：

$('.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 === "[email protected]")
}

<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="[email protected]" />

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

標籤：javascript 形式 验证

上一篇：燒瓶重定向導致超時錯誤

下一篇：Django-ModelForm沒有指定模型類