如何修改此查詢以獲取用戶名和密碼併發送到下一頁？

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 
     } 
    }) 
    }); 
});