如何将ajax与jquery表单验证插件集成以检查是否存在电子邮件

Question

我已经使用PHP，MySql，bootstarp，Jquery，表单验证插件和AJAX创建了我的登录表单，我的表单完美地验证了，我也成功地制作了2个php脚本，用于检查数据库中的用户登录电子邮件和密码是否存在AJAX，但是如果我想把两个单独的AJAX文件中的AJAX响应作为规则在表单验证插件中添加，如何添加ajax作为电子邮件存在目的的规则呢？

感谢任何帮助？

这是我的代码

      <script type="text/javascript">
            /*function CheckEmail()
                {
                    fdata = $("#form1").serialize();
                    $.ajax({
                            type: "POST",
                            url: "CheckLogin.php",
                            data: fdata,
                            success: function(response)
                                                        { 
                                                            $("#LogErrmsg").addClass('ajaxerror').html(response);
                                                        }
                          });
                }
                function checkpass()
                {
                    fdata2 = $("#form1").serialize();
                    $.ajax({
                            type: "POST",
                            url: "Checkpass.php",
                            data: fdata2,
                            success: function(response)
                                                        { 
                                                            $("#LogErrmsg2").addClass('ajaxerror').html(response);
                                                        }
                          });

                }*/
    </script>

    <!-- Validate Plugin -->
 <script src="js/jquery.validate.min.js"></script>
 <style type="text/css">
        label.valid {
                     width: 24px;
                     height: 24px;
                     background: url(bootstrap/img/valid.png) center center no-repeat;
                     display: inline-block;
                     text-indent: -9999px;
                    }
        label.error {
                    font-weight: bold;
                    color: red;
                    padding: 2px 8px;
                    margin-top: 2px;
                    }
        form        {
                    position: relative;
                    margin: 15px;
                    padding: 5px 15px 5px 15px;
                    background-color:#fff;
                    border: 1px solid #ddd;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                    border-radius: 4px;

                    }
    .ajaxerror      {
                    font-style:italic;
                    color:red;
                    }
</style>

  

<form id="form1" action="User_Login.php" method="post" class="form-horizontal">
    <fieldset>
      <legend>Members Login</legend>

      <div>
         <div class="control-group" >
             <div id="LogErrmsg" class="controls"></div>
             <div id="LogErrmsg2" class="controls"></div>
         </div>    
         <div class="control-group"><label class="control-label" for="email">Email :</label>
              <div class="controls"><input type="text" name="email" id="email" class="input-xlarge" onBlur="CheckEmail()"size="32"></div>
         </div>

         <div class="control-group"><label class="control-label" for="password">Password :</label>
              <div class="controls"><input type="password" name="password" id="password" class="input-xlarge" size="32" onBlur="checkpass()"></div>
         </div>

         <div class="control-group">
              <div class="controls"><input type="checkbox" name="remember" class="input-xlarge" id="remember" > Remember me </div>
         </div>

          <div class="form-actions">
            <div><button type="submit" class="btn btn-primary btn-large" >LogIn</button></div>
          </div>  

            <div class="controls"><a href="ForgotPassword.php?mode=password">Forgot Password</a></div>


            <div class="controls">Not a member yet! <a href="User_Register.php"> Register</a></div>

     </div>

    </fieldset>
    <script type="text/javascript">
                $(document).ready(function(){

                                 $('#form1').validate(
                                             {   

                                                 rules: {
                                                         email: {
                                                                 required: true,
                                                                 email: true


                                                             },
                                                         password: {

                                                                 required: true,

                                                                   }


                                                         },

                                                highlight: function(element) {
                                                                             $(element).closest('.control-group').removeClass('success').addClass('error');

                                                                             },
                                                success: function(element) {
                                                                             element
                                                                            .text('OK!').addClass('valid')
                                                                            .closest('.control-group').removeClass('error').addClass('success');
                                                                           }
                                                             });
                                        }); // end document.ready
  </script> 
</form>

Answer 1

function checkEmail(){
   $.ajax({
      url : 'ajax-url.php',
      type : 'POST',
      dataType : 'text',
      cache: false,
      data: data,
      success : function(text){
         alert(text+' was returned');
         console.log('returned');
      },
      error : function(XMLHttpRequest, textStatus, errorThrown) {
         alert('Error '+errorThrown);
      }
   });
}
$("#email").on({keyup: function(){checkEmail();}, blur: function(){checkEmail();});

替换alert()，但是您要处理字段的有效性。使用Twitter Bootstrap，您可以将类success添加到电子邮件字段周围的.control-group，以使其为绿色边框。