HTML

Question

我正在进行jquery表单验证：
密码和用户名验证正在按预期工作，而电子邮件和密码确认不是，虽然我对两者使用相同的技术。这是一个Demo 问题是我没有收到任何控制台错误，他们只是不工作。

HTML

    <title> Sign Up </title>
<body>
<div class=left></div>
<form method="post" action="" >
<table align=" top-center" >
<tr>
    <td><input type='text' placeholder='User name' name='uname' id=u required= 'required' ></input></td>
</tr>
<tr>
<td> <div id=uname_info class=info>
<h4>Username must meet the following requirements:</h4>
<ul>
<li id=uletter class=valid> Start with a <strong>letter</strong>
<li id=ulength class=invalid> Be at least <strong> 4 characters</strong>
</ul>
</tr>
<tr>
    <td><input type='Email' placeholder="Email0" name='em' ></input></td>
</tr>
<tr>
<td >
<div class=info>
<div id='remail'class=invalid> 
<h4 > The email you typed is incorrect<h4>
</div>
</div>
</tr>
<tr>

    <td><input type='password' placeholder='password' name=pa1 id=p1></input></td>
</tr>
<tr>
<td>
<div id="pswd_info" class=info>
<h4>Password must meet the following requirements:</h4>

        <ul>
            <li id="letter" class="invalid">At least <strong>one letter</strong>

            </li>
            <li id="capital" class="invalid">At least <strong>one capital letter</strong>

            </li>
            <li id="number" class="invalid">At least <strong>one number</strong>

            </li>
            <li id="length" class="invalid">Be at least <strong>8 characters</strong>

            </li>
        </ul>
</div></tr>
<tr>

    <td><input type='password' placeholder='Repeat password' name=pa2></input></td>
</tr>
<tr>
<td>
<div id="pswd2_info" class="info">
<h4><strong class=invalid> Passwords Do not match</strong></h4>
</div>
</tr>

<tr>
    <td></td>

    <td><center> <input type='submit' name=submit value='Submit'></center></td>
</tr>
</table>
</form>


</body>

的jquery

$(document).ready(function () {



 $('#u').keyup(function () {
    // set password variable
    var uname = $(this).val();
    var uRegEx = /^[a-zA-Z]/;
    var first = uname.charAt(0);
    if (uname.length < 4) {
        $('#ulength').removeClass('valid').addClass('invalid');
    } else {
        $('#ulength').removeClass('invalid').addClass('valid');
    }
    //validate letter
    if (first != uRegEx.exec(first)) {
        $('#uletter').removeClass('valid').addClass('invalid');
    } else {
        $('#uletter').removeClass('invalid').addClass('valid');
    }

    if ($('#uname_info li.invalid').length == 0) {
        $('#uname_info').fadeOut('slow');
    } else {
        $('#uname_info').fadeIn('slow');

    }
});
$('#u').focus(function () {
    // focus code here
});
$('#u').blur(function () {
    // blur code here
});

$('#u').keyup(function () {

    // keyup code here
}).focus(function () {
    $('#fname_info').show();
}).blur(function () {
    $('#fname_info').hide();
});
$('#em').blur(function () {
function isValidEmail(emailText) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailText);
};
if( !isValidEmail(myEmail) )
{$('#remail').removeClass('valid').addClass('invalid');
}
else
{$('#remail').removeClass('valid').addClass('invalid');}
}); 
$('#em').focus(function () {
    // focus code here
});
$('#em').blur(function () {
    // blur code here
});

$('#em').keyup(function () {

    // keyup code here
}).focus(function () {
    $('#remail').show();
}).blur(function () {
    $('#remail').hide();
}); 
$('#p1').keyup(function () {
    // set password variable
    var pswd = $(this).val();
    if (pswd.length < 8) {
        $('#length').removeClass('valid').addClass('invalid');
    } else {
        $('#length').removeClass('invalid').addClass('valid');
    }
    //validate letter
    if (pswd.match(/[A-z]/)) {
        $('#letter').removeClass('invalid').addClass('valid');
    } else {
        $('#letter').removeClass('valid').addClass('invalid');
    }
    //validate capital letter
    if (pswd.match(/[A-Z]/)) {
        $('#capital').removeClass('invalid').addClass('valid');
    } else {
        $('#capital').removeClass('valid').addClass('invalid');
    }

    //validate number
    if (pswd.match(/\d/)) {
        $('#number').removeClass('invalid').addClass('valid');
    } else {
        $('#number').removeClass('valid').addClass('invalid');
    }

    if ($('#pswd_info li.invalid').length == 0) {
        $('#pswd_info').fadeOut('fast');
    } else {
        $('#pswd_info').fadeIn('fast');

    }
});

$('#p1').focus(function () {
    // focus code here
});
$('#p1').blur(function () {
    // blur code here
});

$('#p1').keyup(function () {

    // keyup code here
}).focus(function () {
    $('#pswd_info').show();
}).blur(function () {
    $('#pswd_info').hide();
}); 


$('#pa2').blur(function () {

var pswd2 = $('#pa2').val();
if(pswd != pswd2)
{
$('#pswd2_info').fadeIn();
}
else
{$('#pswd2_info').fadeOut();
}
});

});

我认为没有必要给css（虽然你可以在小提琴中查看）我尝试调试代码，所以我评论了用户名和密码验证的部分，我确信它没有任何问题。所以我确定错误在这部分：

$('#pa2').blur(function () {

    var pswd2 = $('#pa2').val();
    if(pswd != pswd2)
    {
    $('#pswd2_info').fadeIn();
    }
    else
    {$('#pswd2_info').fadeOut();
    }
    });

和/或这部分：

$('#em').blur(function () {
    function isValidEmail(emailText) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailText);
    };
    if( !isValidEmail(myEmail) )
    {$('#remail').removeClass('valid').addClass('invalid');
    }
    else
    {$('#remail').removeClass('valid').addClass('invalid');}
    }); 
    $('#em').focus(function () {
        // focus code here
    });
    $('#em').blur(function () {
        // blur code here
    });

    $('#em').keyup(function () {

        // keyup code here
    }).focus(function () {
        $('#remail').show();
    }).blur(function () {
        $('#remail').hide();
    });

这里有什么问题？

Answer 1

问题似乎是一些问题。

电子邮件

1）您正在选择带有ID选择器的电子邮件输入，因此请添加正确的ID。

    <input id='em' type='email' placeholder="Email" name='em'>

这样可以让你的模糊实际上被触发。

现在，将在控制台中出错。未定义myEmail，因为它不是。继续并将其分配给电子邮件输入的值

    $('#em').blur(function () {
    myEmail = $('this').val();

2）您可能不想像在用户名中那样将它们添加到列表项中，而不是将无效和有效应用于div。

    <div id=email_info class=info>
       <h4> The email you typed is incorrect: </h4>
       <ul>
         <li id=eformat class=invalid> 
           A valid email format looks like: username@example.com
         </li>
       </ul>
    </div>

然后像之前那样应用淡入淡出

      if (isValidEmail(myEmail)){ 
        $('#email_info').fadeOut('slow');
      } else {
        $('#email_info').fadeIn('slow');
      }

这将修复电子邮件。查看更新后的Gist here

密码确认

至于密码确认，您需要添加您再次选择的相同ID。

  <td><input id='pa2' type='password' placeholder='Repeat password' name=pa2></input>

因为你在这里用pa2选择它

  $('#pa2').blur(function () {

此外，您还需要定义pswd以及已定义的pswd2。

  var pswd = $('#pa1').val();
  var pswd2 = $('#pa2').val();

这应解决这两个问题。查看更新的要点here

Answer 2

这里不是一个错字吗？

    if( !isValidEmail(myEmail) ){
       $('#remail').removeClass('valid').addClass('invalid');
    }
    else{
       $('#remail').removeClass('valid').addClass('invalid');
    }

两条线都相等！

用jquery确认电子邮件和密码？

HTML

的jquery

2 个答案:

电子邮件

密码确认