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

转载作者：行者123 更新时间：2023-11-30 12:51:08

我正在做一个 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>

j查询

$(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(尽管您可以在 fiddle 中查看它)。
我试图调试代码，所以我评论了用户名和密码验证的部分，我确信它没有任何问题。所以我确定错误出在这部分:

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

这里有什么问题吗？

最佳答案

问题似乎出在几件事上。

电子邮件

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

关于javascript - 使用 jquery 确认电子邮件和密码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20922153/

文章推荐： ios - 从不同的 View Controller 打开相同的 View

文章推荐： c# - 如何在每秒的顶部运行计时器？ (当毫秒 = 000 时)

文章推荐： javascript - 将变量添加到 JavaScript 中的变量集

python - 为 CustomUser 指定的未知字段(密码 1、密码 2)
Internal Server Error: /admin/account/customuser/add/ Traceback (most recent call last): File "C:\
php - 我的 php 脚本没有使用给定的用户名/密码/主机，而是使用 root@localhost(密码 : NO)
有问题!虽然我发现几乎相似的线程但没有帮助:( 我编写了一个 php 脚本来从我的 MySQL 数据库中获取注册用户的数量。该脚本在我的本地主机上运行良好；它使用给定的用户名、密码和主机名，分别是“r
密码、文本换行
我正在做一项基于密码的作业，我将 key 和消息放在单独的数组中。我想创建第三个数组，其中包含围绕消息大小的 key ，如下所示: message keykeyk 我已经在这个问题上苦苦挣扎了一段时间
安卓图形登录/密码
我的几个客户要求我实现图形密码检查器，例如关于如何实现这种 UI 有什么想法吗？最佳答案试着看看这个:https://code.google.com/p/android-lockpattern/
phpMyAdmin:密码？
我正在使用 MAMP，每次登录 phpMyAdmin 时，都会收到以下错误/警告消息: the configuration file now needs a secret passphrase (bl
windbg - WDKRemoteUser 密码 ?
我正在尝试通过将 Visual Studio 2013 连接到我的测试机来调试 WDF 驱动程序。它创建一个名为 WDKRemoteUser 的用户，并在进行测试时尝试自动登录。有人知道这个用户的密码
ubuntu - SVN停止询问用户名+密码
使用具有指定用户名和密码的 SVN 提交。我希望服务器抛出错误；所以我可以告诉我的用户他/她的密码错误。相反，在使用错误密码提交后: svn commit "test_file.txt" --use
neo4j - 我如何找到neo4j 密码？
我正在尝试实现 friend 推荐。它从节点“你”开始。而且，我想找到节点“安娜”。换句话说，这是我的两个或更多 friend 共同认识的人。上面的示例节点是 Anna。如果您的帮助，我将不胜感
passwords - wget为什么不接受我的用户名/密码？
我都尝试过 wget --user=myuser --password=mypassword myfile 和 wget --ftp-user=myuser --ftp-password=mypass
Firefox 自动填充用户名/密码
我的一位用户提示说，每当他尝试使用默认管理界面(Django 的管理员)添加新用户(auth.User)时，新用户名和密码都会自动填充他自己的。问题是他在登录时要求 Firefox 记住他的用户名/
iphone - 在应用程序购买沙箱中不提示我输入登录/密码
我们正在开发一款应用(当然)用于应用购买 (IAP)。我已完成指南中的所有操作以启用 iap，并且一切正常，直到我想要购买为止。部分代码: MainViewController.m -(vo
neo4j - neo4j 密码
我试图创建两个可选匹配项的并集(如下所示)，但我得到的不是并集，而是两者的交集。我应该如何更改此查询以获得所需的联合？ optional match (a:PA)-[r2:network*2]-(b:
ssh - 如何在Ansible命令中传递用户名/密码
我想将Ansible用作另一个Python软件的一部分。在该软件中，我有一个包含其用户名/密码的主机列表。有没有一种方法可以将SSH连接的用户/密码传递给Ansible ad-hoc命令或以加密方式
apache - 使用htaccess在Xampp上出现错误500(密码)
嗨，我在使用xampp的Apache Web服务器上收到错误500。直到我使用.htaccess，.htpasswd文件，错误才出现。我搜索了，但找不到语法错误。我只有1张图片和要保护的索引文件。以下
Laravel 密码 & 密码_确认验证
我一直使用它来编辑用户帐户信息: $this->validate($request, [ 'password' => 'min:6', 'password_confirmation'
.net - 使用InstallUtil并静默设置Windows服务登录用户名/密码
我需要使用InstallUtil来安装C# Windows服务。我需要设置服务登录凭据(用户名和密码)。这一切都需要默默地完成。有没有办法做这样的事情: installutil.exe myserv
forms - 浏览器如何决定哪些表单字段是用户名/密码？
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
php - 密码、盐和授权
如果我有一个随机的、16 个字符长的字母数字盐(不同大小写)，它是为每个用户生成和存储的，我是否还需要一个站点范围的盐？换句话说，这样好吗？ sha1($user_salt . $password)
java - 存储用户创建的帐户的用户/密码？
我正在开发一个空白程序，该程序将允许用户创建一个帐户，以便他们可以存储其余额和提款/存款。用户输入用户名和密码后，如何存储这些信息以便用户可以登录并查看其余额？我不一定要尝试使其非常安全，我只是希望能
Neo4j 密码 - 搜索节点之间没有路径
我正在尝试寻找一种通用方法来搜索没有链接到另一个节点或节点集的节点或节点集。例如，我能够找到特定类型(例如 :Style)的所有节点，这些节点以某种方式连接到一组特定的节点(例如 :MetadataR

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

HTML

j查询

电子邮件

密码确认