【问题标题】:If statement with multiple conditions malfunctionif 多条件语句失效
【发布时间】:2018-05-05 02:07:54
【问题描述】:

我正在尝试通过 jQuery 验证 HTML 表单。但是,第二个条件(即文本字段的值必须是某个数字)似乎不起作用。如果有人能说明原因,那就太好了。谢谢你。

我已将代码附加到此问题。

$("#sample1").keyup(function (e) {
	var s_id = $('#sample1').val();

    if (e.keyCode == 13 || s_id=="220764690") {
        alert('Captured Enter !')
        // Do whatever you need
    }
});
h1{
	text-align:center;
	font-family: 'Montserrat', sans-serif !important;

}

.sample1{
	text-align: center;
}

.insert {
  display: inline-block;
}

.log{
	background-color:lightblue;
	display: inline-block;
	padding:90px;
  vertical-align: middle;

}

.logo{
  display: block;
    margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.amber-pink.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<center><div class = "log">
<h1>Hey Technite!</h1>
<center>
<form action="#">
  <div class="insert mdl-textfield mdl-js-textfield textfield-demo">
  
		<input class="mdl-textfield__input" type="text" id="sample1" />
    <label class="mdl-textfield__label" for="sample1" id= "atext">Student ID</label>
  </div>
	</form>
	</center>
	</div>
	</center>
<br><br><br><br><br>
<img src = "https://qph.fs.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" class = "logo">

【问题讨论】:

  • 当我运行您的代码 sn-p 并输入 220764690 作为学生 ID 时显示警报
  • 对,不过不按回车键就不行。
  • @DiViHart 你想在没有输入键的情况下发出警报吗?
  • 现在,只要我输入完 220764690,它就会显示警报。但是,我想按 Enter 键来激活该事件。

标签: jquery html css forms validation


【解决方案1】:

尝试使用&amp;&amp; 运算符而不是||。所以如果它是真的,你可以得到这两个条件。

$("#sample1").keyup(function (e) {
    var s_id = $('#sample1').val();

    if (e.keyCode == 13 && s_id=="220764690") {
        alert('Captured Enter !')
        // Do whatever you need
    }
});

【讨论】:

  • 谢谢。不知道细微差别。
【解决方案2】:

您的if 条件几乎没有错误,您需要使用&amp;&amp; 而不是||,以检查用户是否在input 上输入了enter 密钥和220764690。

$("#sample1").keyup(function (e) {
	var s_id = $('#sample1').val();

    if (e.keyCode == 13 && s_id=="220764690") {
        alert('Captured Enter !')
        // Do whatever you need
    }
});
h1{
	text-align:center;
	font-family: 'Montserrat', sans-serif !important;

}

.sample1{
	text-align: center;
}

.insert {
  display: inline-block;
}

.log{
	background-color:lightblue;
	display: inline-block;
	padding:90px;
  vertical-align: middle;

}

.logo{
  display: block;
    margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.amber-pink.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<center><div class = "log">
<h1>Hey Technite!</h1>
<center>
<form action="#">
  <div class="insert mdl-textfield mdl-js-textfield textfield-demo">
  
		<input class="mdl-textfield__input" type="text" id="sample1" />
    <label class="mdl-textfield__label" for="sample1" id= "atext">Student ID</label>
  </div>
	</form>
	</center>
	</div>
	</center>
<br><br><br><br><br>
<img src = "https://qph.fs.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" class = "logo">

【讨论】:

    【解决方案3】:

    如果你想在你有那个ID的时候显示警报然后按回车,你需要使用&&运算符,而不是||

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-12-17
      • 2017-09-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-05-06
      • 2014-09-06
      相关资源
      最近更新 更多