Question

我正在努力达到以下目标，但我的代码出现问题才能让它发挥作用。任何帮助都会很感激。

目标：添加javascript / jQuery代码以要求登录。有2个字段，名字和姓氏。验证条目。必须分别是“瑞克”和“詹姆斯”。验证字段后，页面上会显示一张图片。单击图片时，将显示页面内容。至少有2个带翻转状态的链接按钮可以更改按钮颜色和/或文本大小。

这是我的剧本：

$(document).ready(function() {

   $("#signup").validate({
      rules: {
        firstName: { required: true  },
        lastName:  { required: true  }
      }, //end rules
      messages:  {
         firstName: {required: "You must enter a value in this field."  },
         lastName: {required: "You must enter a value in this field."  }
      }, // end messages
          errorPlacement: function(error, element) { 
          error.insertAfter(element);
          } 
     }); // end validate
     $('#signup').submit(function() {
         if (($('#firstname').val() == 'John')  && ($('#lastname').val() == 'Taylor'))
            {alert('This works!');
            $('#pic').show();
            $('#main').css("backgorund-image", "url(starwars.jpg)");
          }
         else { alert('Invalid Name'); }
      });  //end submit
    $('#pic').click(function() {
        $('#button1').show();
        $('#button2').show();
    }); // end click
}); // end ready

HTML：

<form id="signup">
        <div>
            <label for="firstName" class="label">First Name</label>
            <input name="firstName" type="text" id="firstname"  class="required" title="Please type your first name.">
        </div>          
        <div>
            <label for="lastName" class="label">Last Name</label>
            <input name="lastName" type="test" class="required" id="lastname">
        </div>          
        <div>
            <input type="submit" name="submit" id="submit" value="Submit">
        </div>
        <div>
        <img src="sith_ewok.png" id="pic">
        <button id="button1">Jedi</button>
        <button id="button2">Sith</button>
        </div>
    </form>

Answer 1

目前在代码中唯一突出的错误是在提交函数中错误拼写background-image。

有一件事似乎很可能是因为表单会自动发布，因此点击提交按钮会看到最小的效果。这可能意味着您永远不会看到脚本执行的效果。要解决此问题，请将return false;添加到提交处理中：

   $('#signup').submit(function() {
     if (($('#firstname').val() == 'John')  && ($('#lastname').val() == 'Taylor'))
     {alert('This works!');
        $('#pic').show();
        $('#main').css("backgorund-image", "url(starwars.jpg)");
      }
     else { alert('Invalid Name'); }
     return false;
  });  //end submit

请注意，如果您实际上要使用此表单在其他页面上进行进一步处理，您可能稍后希望让提交功能允许页面在字段签出的情况下发布。为此，请将return false;代码行移至else和/或添加return true;作为主if块中的最后一行。

Answer 2

下定决心！是“Rick James”还是“John Taylor”？！

无论如何，除了

之外，代码看起来还不错

您应将return false;放入$.submit()以阻止页面清爽
background-color
图片和两个按钮在开始时应设置为display:none，因此show()功能实际上可以正常工作

此外，我没有看到您在任何地方更改按钮颜色/状态的代码。所以我刚刚在按钮上添加了一些.mouseover和.mouseout个事件。这可以通过button:hover {color:red}

这是一个有效的演示：http://jsfiddle.net/dUG8Y/

希望它有所帮助，也许警队会和你在一起。

试图编写一个使用提交函数来验证两个字段的jquerying脚本

2 个答案: