使用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>