如何修改此查询以获取用户名和密码并发送到下一页？

Question

我不擅长jQuery。但是，我有一个表单需要以某种格式进行验证。

请参阅屏幕截图，了解当用户尝试提交而不提供用户名/密码的值时，表单应该如何。

我搜索周围，以满足我们的规范，发现下面的脚本jQuery脚本。

如何将其修改为只有用户名和密码，并且只要用户使用这些值填充表单并单击提交按钮，他/他就被占用page2.aspx？

到目前为止，当我填写表格，然后点击提交按钮，我得到一个警告：

submit! use link below to go to the other step 

最起码，我可以改变这个警报重定向所以它带我到第2页。 ASPX？

$(document).ready(function(){ 
    $.mockjax({ 
     url: "emails.action", 
     response: function(settings) { 
      var email = settings.data.email, 
       emails = ["glen@marketo.com", "george@bush.gov", "me@god.com", "aboutface@cooper.com", "steam@valve.com", "bill@gates.com"]; 
      this.responseText = "true"; 
      if ($.inArray(email, emails) !== -1) { 
       this.responseText = "false"; 
      } 
     }, 
     responseTime: 500 
    }); 

    jQuery.validator.addMethod("password", function(value, element) { 
     var result = this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value); 
     if (!result) { 
      element.value = ""; 
      var validator = this; 
      setTimeout(function() { 
       validator.blockFocusCleanup = true; 
       element.focus(); 
       validator.blockFocusCleanup = false; 
      }, 1); 
     } 
     return result; 
    }, "Your password must be at least 6 characters long and contain at least one number and one character."); 

    // a custom method making the default value for companyurl ("http://") invalid, without displaying the "invalid url" message 
    jQuery.validator.addMethod("defaultInvalid", function(value, element) { 
     return value != element.defaultValue; 
    }, ""); 

    jQuery.validator.addMethod("billingRequired", function(value, element) { 
     if ($("#bill_to_co").is(":checked")) 
      return $(element).parents(".subTable").length; 
     return !this.optional(element); 
    }, ""); 

    jQuery.validator.messages.required = ""; 
    $("form").validate({ 
     invalidHandler: function(e, validator) { 
      var errors = validator.numberOfInvalids(); 
      if (errors) { 
       var message = errors == 1 
        ? 'You missed 1 field. It has been highlighted above' 
        : 'You missed ' + errors + ' fields. They have been highlighted above'; 
       $("div.error span").html(message); 
       $("div.error").show(); 
      } else { 
       $("div.error").hide(); 
      } 
     }, 
     onkeyup: false, 
     submitHandler: function() { 
      $("div.error").hide(); 
      alert("submit! use link below to go to the other step"); 
     }, 
     messages: { 
      password2: { 
       required: " ", 
       equalTo: "Please enter the same password as above" 
      }, 
      email: { 
       required: " ", 
       email: "Please enter a valid email address, example: you@yourdomain.com", 
       remote: jQuery.validator.format("{0} is already taken, please enter a different address.") 
      } 
     }, 
     debug:true 
    }); 

    $(".resize").vjustify(); 
    $("div.buttonSubmit").hoverClass("buttonSubmitHover"); 

    $("input.phone").mask("(999) 999-9999"); 
    $("input.zipcode").mask("99999"); 
    var creditcard = $("#creditcard").mask("9999 9999 9999 9999"); 

    $("#cc_type").change(
    function() { 
     switch ($(this).val()){ 
     case 'amex': 
      creditcard.unmask().mask("9999 999999 99999"); 
      break; 
     default: 
      creditcard.unmask().mask("9999 9999 9999 9999"); 
      break; 
     } 
    } 
); 

    // toggle optional billing address 
    var subTableDiv = $("div.subTableDiv"); 
    var toggleCheck = $("input.toggleCheck"); 
    toggleCheck.is(":checked") 
    ? subTableDiv.hide() 
    : subTableDiv.show(); 
    $("input.toggleCheck").click(function() { 
     if (this.checked == true) { 
     subTableDiv.slideUp("medium"); 
     $("form").valid(); 
     } else { 
     subTableDiv.slideDown("medium"); 
     } 
    }); 


}); 

$.fn.vjustify = function() { 
    var maxHeight=0; 
    $(".resize").css("height","auto"); 
    this.each(function(){ 
     if (this.offsetHeight > maxHeight) { 
      maxHeight = this.offsetHeight; 
     } 
    }); 
    this.each(function(){ 
     $(this).height(maxHeight); 
     if (this.offsetHeight > maxHeight) { 
      $(this).height((maxHeight-(this.offsetHeight-maxHeight))); 
     } 
    }); 
}; 

$.fn.hoverClass = function(classname) { 
    return this.hover(function() { 
     $(this).addClass(classname); 
    }, function() { 
     $(this).removeClass(classname); 
    }); 
}; 

这是我得到脚本的链接。如果你点击完成按钮，你会看到我们希望模仿的行为。

http://jquery.bassistance.de/validate/demo/marketo/step2.htm

Answer 1

你不需要这一切。请记住，所有验证也应该在服务器端完成。如果您需要检查数据库的用户名和密码，则需要包含ajax调用。

<div class="loginStatus"></div> 
<div class="alert"></div> 
<input type="text" name="username" id="username" /> 
<input type="text" name="password" id="password" /> 
<button id="submitButton">Submit</button> 

末HTML

$(function() { 
    $('#submitButton').on('click', function() { 
    var username = $('#username').val(); 
    var password = $('#password').val(); 
    if(username.length < 6) { 
     $('#username').css('border', '1px solid red'); 
     $('.alert').html('Please enter valid username'); 
     $('.loginStatus').html('Bad'); 
     return false; 
    } 
    if(password.length < 6) { 
     $('#password').css('border', '1px solid red'); 
     $('.alert').html('Please enter valid password'); 
     $('.loginStatus').html('Bad'); 
     return false; 
    } 
    $('.loginStatus').html('good'); 
    $('#username').css('border', '1px solid #3c3c3c'); 
    $('#password').css('border', '1px solid #3c3c3c'); 
    $.ajax({ 
     url: "checklogin.aspx?un="+ username + '&pw=' + password, //send values to server side code to check if they are valid in database 
     cache: false 
    }) 
    .done(function(html){ //send back response 
     $('.loginStatus').html(html); //sends whether login status is valid 
     if($('.loginStatus').text() === 'good') { //this is some hidden container that holds a value of good or bad 
      window.location = "page2.aspx"; //if login is good then advance to next page 
     } 
    }) 
    }); 
});