0

Sorry for the double question, I'm encountering a few issues as I try to crack this password change form. This is a follow on from my previous question here about submitting a form only if the 'if' statements return true.

I have a keyup function that runs through if/else statements to check that a password conforms to a number of requirements. For example, if it is longer than 7 characters, if it contains a capital letter, if it contains 2 numbers etc. I have created a global variable 'rtnTrue = 1' that I set as 0 on the else statements inside the keyup function (if they fail one of the requirements then rtnTrue = 0). So the theory is that if rtnTrue = 1, then the form can be submitted, otherwise it can't.

I have 2 problems:

  1. Even with the variable global, I still need to set another rule on the submit action because the rtnTrue will only happen when the user types something in the password input box. E.g. if they just press submit without typing anything, then rtnTrue = 1 anyway so it'll submit. I need something along the lines of pwd.length == 0 but I'm not too sure how to do that because of this variable being inside the keyup function?
  2. If I type something incorrect in the box and click submit, my callback alert is showing up 3 times and I don't know why!

Here's my JS code and I've created a JSFiddle here because it's quite long!

var rtnTrue = 1;

$('#password-info').hide();

$('#form-password-change #input-password').keyup(function() {

    // keyup code here
    // set password variable
    var pwd = $(this).val();

    // validate the length
    if (pwd.length > 7) {
        $('#length').removeClass('invalid').addClass('valid');
    } else {
        $('#length').removeClass('valid').addClass('invalid');
        rtnTrue = 0;
    }

    // RegExp
    // validate letter
    if ( /([^a-z]*[a-z]){3,}/i.test(pwd) ) {
        $('#letter').removeClass('invalid').addClass('valid');
    } else {
        $('#letter').removeClass('valid').addClass('invalid');
        rtnTrue = 0;
    }

    // validate repeated letters (none repeated more than twice)
    if ( /([A-Za-z])(.*?\1){2}/.test(pwd) ) {
        $('#letter .repeated').removeClass('valid').addClass('invalid');
        $('#letter').addClass('invalid-repeated');
    } else {
        $('#letter .repeated').removeClass('invalid').addClass('valid');
        $('#letter').removeClass('invalid-repeated');
        rtnTrue = 0;
    }

    // validate capital letter
    if (pwd.match(/[A-Z]/)) {
        $('#capital').removeClass('invalid').addClass('valid');
    } else {
        $('#capital').removeClass('valid').addClass('invalid');
        rtnTrue = 0;
    }

    // validate number
    if ( /([^\d]*[\d]){2,}/.test(pwd) ) {
        $('#number').removeClass('invalid').addClass('valid');
    } else {
        $('#number').removeClass('valid').addClass('invalid');
        rtnTrue = 0;
    }

    // validate repeated numbers (none repeated more than twice)
    if ( /([\d])(.*?\1){2}/.test(pwd) ) {
        $('#number .repeated').removeClass('valid').addClass('invalid');
        $('#number').addClass('invalid-repeated');
    } else {
        $('#number .repeated').removeClass('invalid').addClass('valid');
        $('#number').removeClass('invalid-repeated');
        rtnTrue = 0;
    }

    passwordFormSubmit(); // New Function

}).focus(function() {
    // focus code here
    $('#password-info').slideDown('fast');

}).blur(function() {
    // blur code here
    $('#password-info').show();
});

function passwordFormSubmit() { 

    var local = rtnTrue;

    if (rtnTrue==1) {
        $('#form-password-change').submit(function(){
            return true;
        });
    }else {
        $('#form-password-change').submit(function(){
            alert(rtnTrue);
            return false;
        });
    }
}
4

2 回答 2

0

如果您确实想要一些快速的方法来实现您的目标，我修改了您的 JSFiddle。尝试使用 true / false 而不是 0 或 1。并且您当前正在尝试在每次用户键入时提交表单。您将看到我在 JSFiddle 中所做的事情。

并尝试将第一个变量设置为false，这样如果用户在没有输入的情况下单击提交按钮，它将不会提交。

http://jsfiddle.net/ZncQx/22/

var passwordFine = false;
于 2013-05-20T01:31:06.930 回答
0

首先模块化您的代码并定义您的变量并扩展您的流程位：

(function()
{
   var bPasswordValid = false;
   var txtInput       = $('selector');
   var btnSubmit      = $('selector');

   txtInput.data("IsValid", false);

   txtInput.on("change", Validate); // Setting to change instead of keyup should optimize your code unless you are stripping values if they are not valid
   btnSubmit.on("click", ValidateAll); // Setting to click could be replaced by someForm.on("submit", ValidateAll) if enter key is not caught by click handler

   var Validate = function(oEvent) 
   {
      // Check if the input is valid
      var sVal = $(this).val();

      if (sVal /* passes validation */ )
         txtInput.data("IsValid", true);
   } 

   var ValidateAll = function(oEvent)
   {
      if ( txtInput.data("IsValid") )
         return;
      else 
      {
         // Do some validation msg stuff
         return false; // prevent form from being submitted
      }
   }
}())

这应该可以很好地推动您朝着正确的方向前进，在这里可以看到一个大部分工作的模块

于 2013-05-20T03:03:37.690 回答