实时表单验证没有出现在一些输入

Question

我想为我的注册页面添加一些实时表单验证，但只有我的电子邮件输入显示正确或错误输出，我tshould，以及我的用户名或密码都是，在过去的几个小时里，我尝试了解哪些是错误的，但是我只是在代码中找不到任何可能导致错误的错误。希望有人能看到错误。

表单代码

<form id="jform" action="" method="post" enctype="multipart/form-data"> 
       <div id="modal_content_left"> 
       Register 

       <ul> 

        <li class="required" type="none"> 

         <label> 

          <input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/> 

         </label> 

         <label> 
          <br /> 
          <input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/> 

         </label> 
         <label> 
          <br /> 
          <input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/> 

         </label> 


         <label> 
          <br /> 
          <input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/> 
         </label> 
        </li> 


       </ul></form> 

jQuery代码

// JavaScript Document 

$(document).ready(function(){ 
    jVal = { 

      'username' : function() { 

      $('body').append('<div id="usernameInfo" class="info"></div>'); 

      var ele = $('#username'); 
      var pos = ele.offset(); 



      var patt = /^(?=.*[a-z].*)\w{8,}$/i; 

      if(!patt.test(ele.val())) { 
       jVal.errors = true; 
        ele.removeClass('correct').addClass('error'); 
        ele.effect("shake", { times:3 }, 50); 

      } else { 
        ele.removeClass('error').addClass('correct'); 
      } 
     }, 




     'email' : function() { 

      $('body').append('<div id="emailInfo" class="info"></div>'); 

      var ele = $('#email'); 
      var pos = ele.offset(); 



      var patt = /^.+@.+[.].{2,}$/i; 

      if(!patt.test(ele.val())) { 
       jVal.errors = true; 
        ele.removeClass('correct').addClass('error'); 
        ele.effect("shake", { times:3 }, 50); 

      } else { 
        ele.removeClass('error').addClass('correct'); 
      } 
     }, 

     'password' : function(){ 

      $('body').append('<div id="passwordInfo" class="info"></div>'); 


      var ele = $('#password'); 
      var pos = ele.offset(); 


      if(ele.val().length < 6) { 
       jVal.errors = true; 
        ele.removeClass('correct').addClass('error'); 
        ele.effect("shake", { times:3 }, 50); 

      } else { 
        ele.removeClass('error').addClass('correct'); 
      } 

     }, 





    $('#username').change(jVal.username); 
    $('#email').change(jVal.email); 
    $('#password').change(jVal.password); 

    $('input[name="agree_cons"]').change(jVal.agree); 
}); 

Answer 1

没有什么错与您的代码。它适用于如果你包含jQuery和jQuery UI。

这是一个工作fiddle。该只有我所做的更改是：

1. 包括jQuery的
2. 包括jQuery UI的。
3. 添加CSS的声明.correct和.error

仔细检查你正在做所有这些事情在自己的代码，你应该得到预期的结果。