-1

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

请查看屏幕截图以了解当用户尝试提交但未提供用户名/密码值时表单的外观。

在此处输入图像描述

我四处搜索符合我们规范的 jQuery 脚本，并找到了下面的脚本。

如何将其修改为仅包含用户名和密码，并且一旦用户使用这些值填写表单并单击“提交”按钮，她/他就会被带到 page2.aspx？

到目前为止，当我填写表单并单击提交按钮时，我收到了一个警报：

submit! use link below to go to the other step

至少，我可以将此警报更改为重定向，以便将我带到 page2.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);
    });
};

这是我获得脚本的下面的链接。如果您单击 Finish 按钮，您会看到我们想要模仿的行为。

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

4

1 回答 1

0

你不需要所有这些。请记住，所有验证也应该在服务器端完成。如果您需要检查数据库的用户名和密码，则需要包含一个 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
      }
    }) 
   });
 });
于 2013-11-04T22:13:47.843 回答