堆栈内存溢出
  简体   繁体   English

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

[英]Email and password confirmation with jquery?

 原文  2014-01-04 14:23:33  4   2    javascript/ jquery/ html/ css/ validation

问题描述

I'm making a jQuery form validation:我正在做一个 jQuery 表单验证：

Password and username validation is working as expected while the email and password confirmation aren't, though I use the same technique for both.密码和用户名验证按预期工作，而电子邮件和密码确认则没有，尽管我对两者使用相同的技术。

Here is a Demo这是一个演示

The problem is that I'm not getting any console errors, they just don't work.问题是我没有收到任何控制台错误，它们只是不起作用。

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

});

I see no need for giving the css (though you can view it in the fiddle).我认为没有必要提供 css（尽管您可以在小提琴中查看它）。
I tried to debug the code so I commented the part of username and password validation and I'm sure there is nothing wrong with it.我试图调试代码，所以我评论了用户名和密码验证的部分，我确信它没有任何问题。 So I'm sure the error is in this part:所以我确定错误在这部分：

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

and/or this part :和/或这部分：

$('#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();
    });

What is wrong here?这里有什么问题？

2 个解决方案

解决方案1
 2 已采纳  2014-01-04 19:37:37

The problem appears to be a few things.问题似乎是几件事。

Email电子邮件

1) You're selecting the email input with an id selector, so add the proper id. 1) 您正在使用 id 选择器选择电子邮件输入，因此请添加正确的 id。

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

This will allow your blur to actually get triggered.这将使您的模糊实际上被触发。

Now, you will get an error in the console.现在，您将在控制台中收到错误消息。 myEmail is not defined, as it isn't. myEmail 没有定义，因为它不是。 Go ahead and assign it to the value of the email input继续并将其分配给电子邮件输入的值

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

2) Rather than applying invalid and valid to a div, you'll probably want to add them to a list item as you did in the username. 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>

And then apply the fading in and out as you did before然后像以前一样应用淡入淡出

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

This will fix email.这将修复电子邮件。 See your updated Gist here在此处查看更新的要点

Password Confirmation密码确认

As for password confirmation, you need to add the same id you're selecting again.至于密码确认，您需要添加您再次选择的相同ID。

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

Since you are selecting it with pa2 here因为你在这里用 pa2 选择它

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

Also, you'll need to define pswd along with the already defined pswd2.此外，您还需要定义 pswd 以及已定义的 pswd2。

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

This should fix both problems.这应该可以解决这两个问题。 See updated gist here在此处查看更新的要点

解决方案2
 1  2014-01-04 15:41:34

Isn' t there a typo here?这里不是有错别字吗？

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

The both lines are equal!两条线是平等的！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery代码无法用于密码确认 - Jquery code not working for password confirmation 如何在没有DOM操作或jQuery的情况下在AngularJS中制定指令来验证电子邮件或密码确认？ - How can I make a directive in AngularJS to validate email or password confirmation without DOM manipulation or jQuery? 我将如何创建一种围绕密码确认和电子邮件确认的方法？ - How would I create a way around password confirmation and email confirmation? 如何匹配Jquery的密码确认 - How can I match password confirmation by Jquery jQuery验证不会确认密码确认 - jQuery validation won't acknowledge the password confirmation Parse Server - 如何翻译Email确认和密码重置的页面 - Parse Server - How to Translate The Pages of Email Confirmation and Password Reset 如何在jQuery的密码确认中使两条消息生效？ - How can I make two message in password confirmation in jQuery validate? JavaScript 密码和密码确认匹配 - JavaScript password and password confirmation match 角度2确认密码 - password confirmation in angular 2 密码确认未触发 - Password confirmation not being fired
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM