使用javascript驗證文本字段中的輸入（需要為兩個值之一）

Question

長期的讀者，第一次的海報。 我是Java的新手，但是一段時間以來我一直在修補HTML，PHP和SQL。 總之，長話短說，我大學的老師給我們分配了一些偽代碼，我決定看看是否可以使用Javascript將其轉換為工作形式。 我已經提交了作業，請放心，您並沒有在幫助我作弊。 我只想看看這是否可以用Javascript完成，但可能不可行：

本周有3部經典電影在售：1.星球大戰2. ET 3.奪寶奇兵》。

用戶必須輸入他們想要看的電影的編號。 如果輸入的值是<1或> 3，則頁面應返回錯誤。

用戶可以選擇流式傳輸或下載電影，並且需要輸入文本框S進行流傳輸，或輸入D進行下載。

到目前為止，我需要幫助的是驗證來自流/下載文本框的輸入。 到目前為止，我的代碼是這樣的：

<p id="welcome">Welcome to MovieStream! Would you like to Stream or Download   
your movies? Type S for stream, D for download</p>
<form>
<input type="text" id="purchaseType">
<input type="submit" action="validateForm()">
</form>
<script type="text/javascript">
function validateForm() {

if (document.getElementById("purchaseType").value != S || D) {
    alert("Please type S to stream the movie, or D to download");
}
}
</script>

到目前為止，這是我所了解的。 當我單擊提交時，什么也沒有發生（我什至嘗試過

document.getElementById("welcome").innerHTML += "Please type S to stream the movie, or D to Download");

但它仍然不起作用。 我認為這與“ .value！= S || D”區域有關，但是我似乎在任何地方都找不到任何信息。 僅使用Javascript還能進行此操作嗎？ 我真的希望這是有道理的，希望有人會為我解答。 謝謝 ：）

Answer 1

您可以將pattern屬性設置為input元素，如下所示：

  <input type="text" id="purchaseType" pattern="S|D" required>

然后，如果要自定義錯誤消息，請在其上引發input事件時檢查validity屬性：

purchaseType.addEventListener( "input", function ( event ) 
{
  if ( purchaseType.validity.patternMismatch ) 
    purchaseType.setCustomValidity( "Please type S to stream the movie, or D to download" ) 
  else 
    purchaseType.setCustomValidity( "" )
} )

最后，添加帶有偽元素:invalid CCS規則，以提供視覺反饋，例如：

#purchaseType:invalid {
  color: red ;
  border: 1px solid  red ;
  box-shadow: 0 0 10px 0 red  ;
  }

#purchaseType:valid {
  color: limegreen ;
  border: 1px solid limegreen ;
  }

參考： MDN數據表單驗證

 purchaseType.addEventListener( "input", function ( event ) { if ( purchaseType.validity.patternMismatch ) purchaseType.setCustomValidity( "Please type S to stream the movie, or D to download" ) else purchaseType.setCustomValidity( "" ) } ) 

 #purchaseType:invalid { color: red ; border: 1px solid red ; box-shadow: 0 0 10px 0 red ; } #purchaseType:valid { color: limegreen ; border: 1px solid limegreen ; box-shadow: 0 0 5px 0 limegreen; } #purchaseType:focus { outline: none ; } 

 <p id="welcome">Welcome to MovieStream! Would you like to Stream or Download your movies? Type S for stream, D for download</p> <form> <input type="text" id="purchaseType" pattern="S|D" required placeholder="Type S or D" autofocus> <input type="submit"> </form> 

Answer 2

您需要將輸入的期望值與字符串進行比較：

if (document.getElementById("purchaseType").value != 'S' && document.getElementById("purchaseType").value != 'D') {

（單引號）

更新：

這是您需要更改的部分：

• 為了防止將表單發送到服務器，您需要onsubmit回調
• 每次點擊后，替換#error內容，而不是附加（相同）錯誤消息

 function validateForm() { if (document.getElementById("purchaseType").value != 'S' && document.getElementById("purchaseType").value != 'D') { document.getElementById("error").innerHTML = "Please type S to stream the movie, or D to download"; return false; } return true; } 

 <form onsubmit="return validateForm()"> <input type="text" id="purchaseType"> <input type="submit"> </form> <p id="error"></p>