我的第一个Jquery代码有什么问题，我如何完成这个事件

What's wrong with my first Jquery code and how can I accomplish this event?

本文关键字：何完成 事件 问题 Jquery 第一个 代码 什么 我的      更新时间：2023-09-26

我有一个快速的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'))。基准测试显示它的性能要好很多。
    • 原生JavaScript可以代替jQuery来评估输入字段值的存在，并且通常运行得更快;将if($(this).val().length == 0)...替换为if (this.value.length === 0)

语法错误-缺少) 

if($(this.val().length == 0) {
      ---^
应该

if($(this).val().length == 0) {

问题是您没有等待页面加载以附加您的事件。这在jQuery中很容易做到，只需将代码包围在$(function () {...});中，就像我下面所做的那样:

我还修正了一个错别字。

$(function () {
    $(':submit').click(function(e) {
     $(':text').each(function() {
      var th = $(this);
      if(th.val().length == 0) {
        th.css('border', '2px solid red');
        }
    });
    e.preventDefault();
    });
});
相关文章：