我有一个快速的 Jquery 问题.. 如果单击提交后根本没有填充输入文本框，则此 Jquery 代码应该在输入文本框上显示红色边框，此代码来自书籍，我完全按照代码的方式复制是，但我根本没有看到红色边框，看起来它不起作用..
另外，我想在表单验证过程中给出此代码条件。如果ESN列表文本字段在1000到3000的范围内，我希望下拉菜单自动选择下面的STM3，如果数字输入的范围在 5000 到 9000 之间，我希望 Trackpack 在用户在文本输入字段上输入 6000 后自动填充。在文本字段上输入数字后如何触发下拉菜单？对于新手来说太棘手了，非常感谢您的帮助。
<html>
<head> <title> Form </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(':submit').click(function(e) {
$(':text').each(function() {
if($(this.val().length == 0) {
$(this).css('border', '2px solid red');
}
});
e.preventDefault();
});
</script>
</head>
<body >
<form id="provision">
ESNList: <input type="text" id="ESNList" name="ESNList" size="30" /> <br />
ESN Start:<input type="text" id="ESNStart" name="ESNStart" size="10" /> <br />
ESN End: <input type="text" id="ESNStart" name="ESNStart" size="10" /> <br />
UnitName:<input type="text" id="STxName" name="STxName" size="30" /> <br />
Unit Model: <select name="STxName">
<option value="stx2">STX2</option>
<option value="protopak">Protopak</option>
<option value="stm3" selected>STM3</option>
<option value="acutec">Acutec</option>
<option value="mmt">MMT</option>
<option value="smartone">Trackpack</option>
<option value="smartoneb" >SmartOneB</option>
<option value="audi">Acutec</option>
</select> <br />
RTU Model Type:
<select name="rtumodel">
<option value="globalstar">GlobalStar</option>
<option value="both">Both</option>
<option value="comtech">Comtech</option>
<option value="stmcomtech">STMComtech</option>
</select> <br />
<input type="submit" value ="submit" />
</form>
</body>
</html>
最佳答案
您有一个拼写错误($(this.val().length 应该是 $(this).val().length)。
$(':submit').click(function(e) {
e.preventDefault();
$(':text').each(function() {
if($(this).val().length == 0) {
$(this).css('border', '2px solid red');
}
});
});
一些想法:
- 为了便于阅读，请考虑在之前阻止默认值 (
e.preventDefault();) 评估输入字段的长度。 - 还可以考虑使用
更具体的
$('input:text')选择器(而不是$(':text'))。 Benchmarking表明它的性能好得多。 - 原生 JavaScript 可以取代您用来评估输入字段值是否存在的 jQuery，并且将 generally run faster ;将
if($(this).val().length == 0)...替换为if (this.value.length === 0)
参见http://jsfiddle.net/jhfrench/PvHGM/一个工作示例。
关于javascript - 我的第一个 Jquery 代码有什么问题以及如何完成此事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14345185/