【问题标题】：Email and password confirmation with jquery?使用 jquery 确认电子邮件和密码？
【发布时间】：2014-01-04 14:23:33
【问题描述】：

我正在做一个 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();
    });

这里有什么问题？

【问题讨论】：

标签： javascript jquery html css validation

【解决方案1】：

问题似乎出在几个方面。

电子邮件

1) 您正在使用 id 选择器选择电子邮件输入，因此请添加正确的 id。

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

这将使您的模糊真正被触发。

现在，您将在控制台中收到错误消息。 myEmail 没有定义，因为它没有。继续并将其分配给电子邮件输入的值

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

2) 与其将 invalid 和 valid 应用于 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

【讨论】：

谢谢，我想我的问题是我在混合使用 php 和 javascript。
非常欢迎，很高兴能帮上忙。我建议也将您的 html 放入验证器和对齐器中。在观察 DOM 时，让标签正确对齐真的很值得。一些免费的 - HTML Validator 和 HTML Code Aligner。此外，JSLint 是一个很棒的 JavaScript。根据您使用的文本编辑器或 IDE，您可能有一个内置的或可用作插件的。祝你好运！

【解决方案2】：

这里没有错字吗？

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

两条线相等！

【讨论】：

谢谢我在我的代码中修复了它，但div仍然没有出现在第一位。