使用Javascript/Jquery和正确/错误图像登录验证文本框/输入

我想用javascript/jquery登录以进行验证，然后当我点击按钮时，它会检查数据库中的这些值，但我只需要javascript/jquery的帮助

当你开始输入文本框/输入用户名或密码时，我想这样做，然后这些图像中的一个：错误-正确

输入文本框时应显示图像错误。你必须在用户名和密码中至少写6个字符，所以在你写了超过6个字符之前，我应该被显示出来。

当您写入超过6个字符且用户名仅为0-9 Aa时，应显示正确的图像

代码： 编辑：

我知道它是注册/注册的，但问题是，如果没有提出要求，这个框就会弹出。 [https://signup.leagueoflegends.com/en/signup/index][1]

---

我希望您不是在用它来构建公共网站，因为jquery需要与web服务对话，而web服务将被赋予许多错误的组合以进行检查，并且永远不会怀疑任何事情。基本上，这将是一个受欢迎的暴力入门点。

输入验证是您需要的。看起来，你不想使用javascript，我假设…，所以好消息是，它有一个HTML5特性。使用：

<input type="text" pattern="^\w{10}$">

你找到了一个概览

---

编辑：哦，我误解了你的问题。然而，我发现这是一个比javascript/jquery脚本更好的解决方案

我已经创建了一个您想要的原型，可能它会帮助您了解整个流程

HTML代码：

JS代码：

JS小提琴：

---

快乐编码：

这是一个jQuery事件，它测试每次击键或粘贴时的字符数

$('#TextBoxPassword').on('change keyup paste', function(e){

        var reg = /^[A-Za-z0-9 ]{6,}$/;
        var $target = $(e.target);

    if(reg.test($target.val()) == false){
        $('#wrongpass').css('visibility', 'visible');
         $('#correctpass').css('visibility', 'hidden');        
    }
    else if(reg.test($target.val()) == true){
        $('#wrongpass').css('visibility', 'hidden');
         $('#correctpass').css('visibility', 'visible');        
    }

});

---

看看小提琴

你可以试试这个http://mrbool.com/how-to-validate-password-strength-using-jquery/26760 进行字段所需的所有复杂验证，或者如果需要简单验证，您可以自己创建一个，通过在每个字段旁边添加一个标签，并根据左边相应字段的更改事件更新其中的文本。我对javascript/jquery不太了解，但我不明白当我想要一个图像时，你想用密码强度做什么。我的意思是，我想这样你需要写超过6个字符，如果你没有写超过6个字符，那么你不应该继续，然后错误的图像应该是可见的。我只想做一个登录表单，这是工作，所以我可以复制它为我的下一个网站或帮助，如果我的一些朋友想要一个登录表单。那么你有什么建议呢？既然你说的是ASP，那就使用标准的工具吧：我不说ASP，我说我在寻求有关Javascript/Jquery的帮助，由于我访问的页面中99%的页面得到了javascript正确/错误的验证A您将问题标记为asp.net b我是说在客户端验证时要非常小心c我是说在提交时使用服务器端验证。或者您希望在不检查用户名/密码是否正确的情况下显示正确的图像？例如，如果输入的密码长度至少为6个字符，则进行简单验证？好吧，我只使用table来获得外观更好的登录，因为我不喜欢设计太多样式，让它像我希望的那样放置，我希望它像table那样放置。好吧，我假设如果文本框/输入少于6个字符，我需要javascript/jquery来显示错误的图像。我已经编辑了正则表达式，现在输入必须至少有6个字母才有效。正如我提到的：对图像使用css。看这篇编辑过的文章。我在输入上加上了模式，我用有效和无效的输入设置了样式，但这不是我所期望的。。它只是犯了一个错误试着这样说：也许这对我的问题会有帮助我犯了一个错误是什么意思？我想我还是不明白你的问题……小提琴什么也不做。

input:valid {
  background-image : url(img/right.png);
}
input:invalid {
  background-image: url(img/wrong.png);
}

Username:<input id="uid" type="text" name="Uname" size="15" /><label id="ulbl"></label>
</br></br></br>
Password:<input id="pid" type="text" name="Uname" size="15" /><label id="plbl"></label>

.correct {
    color:green;
 }
.wrong {
    color:red;
 }

var exp = /^[a-zA-Z]*$/;
$('#uid').on("keyup", function () {
   if ($(this).val().length > 9 && exp.test($(this).val())) {
      $('#ulbl').html('<B>CORRECT<B>');
      $('#ulbl').removeClass('wrong');
      $('#ulbl').addClass('correct');
   } else if ($(this).val().length === 0) {
      $('#ulbl').html('');
      $('#ulbl').removeClass('wrong');
   } else {
      $('#ulbl').html('<B>WRONG<B>');
      $('#ulbl').removeClass('correct');
      $('#ulbl').addClass('wrong');
   }

});

$('#pid').on("keyup", function () {
   if ($(this).val().length > 6) {
       $('#plbl').html('<B>CORRECT<B>');
       $('#plbl').removeClass('wrong');
       $('#plbl').addClass('correct');
   } else if ($(this).val().length === 0) {
       $('#plbl').html('');
       $('#plbl').removeClass('wrong');
   } else {
       $('#plbl').html('<B>WRONG<B>');
       $('#plbl').removeClass('correct');
       $('#plbl').addClass('wrong');
   }
 });

$('#TextBoxPassword').on('change keyup paste', function(e){

        var reg = /^[A-Za-z0-9 ]{6,}$/;
        var $target = $(e.target);

    if(reg.test($target.val()) == false){
        $('#wrongpass').css('visibility', 'visible');
         $('#correctpass').css('visibility', 'hidden');        
    }
    else if(reg.test($target.val()) == true){
        $('#wrongpass').css('visibility', 'hidden');
         $('#correctpass').css('visibility', 'visible');        
    }

});