堆栈内存溢出
  繁体   English   中英

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

[英]Email and password confirmation with jquery?

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

问题描述

我正在做一个 jQuery 表单验证：

密码和用户名验证按预期工作，而电子邮件和密码确认则没有，尽管我对两者使用相同的技术。

这是一个演示

问题是我没有收到任何控制台错误，它们只是不起作用。

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>

查询

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

这里有什么问题？

2 个解决方案

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

问题似乎是几件事。

电子邮件

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

这将修复电子邮件。 在此处查看更新的要点

密码确认

至于密码确认，您需要添加您再次选择的相同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();

这应该可以解决这两个问题。 在此处查看更新的要点

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

这里不是有错别字吗？

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

两条线是平等的！

暂无
暂无

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

相关问题 jQuery代码无法用于密码确认 如何在没有DOM操作或jQuery的情况下在AngularJS中制定指令来验证电子邮件或密码确认？ 我将如何创建一种围绕密码确认和电子邮件确认的方法？ 如何匹配Jquery的密码确认 jQuery验证不会确认密码确认 Parse Server - 如何翻译Email确认和密码重置的页面 如何在jQuery的密码确认中使两条消息生效？ JavaScript 密码和密码确认匹配 角度2确认密码 密码确认未触发
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM