JQuery 验证插件：使用自定义 Ajax 方法答案

【问题标题】：JQuery Validation Plugin: Use Custom Ajax MethodJQuery 验证插件：使用自定义 Ajax 方法
【发布时间】：2010-02-03 12:03:35
【问题描述】：

如果可能，请通过Jquery form validation plugin 寻求帮助。

我正在通过对我的数据库进行 ajax 调用来验证表单的电子邮件字段，该调用检查电子邮件字段中的文本当前是否在数据库中。

    // Check email validity on Blur
       $('#sEmail').blur(function(){
       // Grab Email From Form
       var itemValue = $('#sEmail').val();
        // Serialise data for ajax processing
        var emailData = {
            sEmail: itemValue
        }
        // Do Ajax Call
         $.getJSON('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc?method=getAdminUserEmail&returnFormat=json&queryformat=column', emailData, function(data){

                    if (data != false) {
                        var errorMessage = 'This email address has already been  registered';
                    }
                    else {
                        var errorMessage = 'Good'
                    }
                })
    });

我想做的是将此调用合并到我的 JQuery Validation Plugin 的规则中...例如

    $("#setAdminUser").validate({
      rules:{
             sEmail: {
                  required: function(){
                  // Replicate my on blur ajax email call here
                 }                  
             },
            messages:{
                sEmail: {
                    required: "this email already exists"       

            }
        });

想知道是否有办法实现这一点？非常感谢

【问题讨论】：

标签： jquery-plugins jquery jquery-validate

【解决方案1】：

您正在执行 AJAX 请求，ergo：当您的自定义验证器返回 true 或 false 时，验证已经完成。

您将需要使用异步。另见这篇文章：How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

假设我们有一个自定义验证来检查唯一手机号，所以我们将添加一个新方法如下来检查唯一手机号：

jQuery.validator.addMethod("uniqueMobile", function(value, element) {
    var response;
    $.ajax({
        type: "POST",
        url: <YOUR SERVER SCRIPT/METHOD>,
        data:"mobile="+value,
        async:false,
        success:function(data){
            response = data;
        }
    });
    if(response == 0)
    {
        return true;
    }
    else if(response == 1)
    {
        return false;
    }
    else if(response == 'logout')
    {
        return false;
    }
}, "Mobile is Already Taken");

【讨论】：

我们可以使用$.get() 吗？
是的，您可以使用 $.get() 函数，因为它是一种通过 jQuery 对服务器进行 ajax 调用的抽象方法，但在这种情况下，您必须发送数据，例如：“mobile ="+value 附加到您请求的 url。
async: false，会锁定界面
我收到一个错误未定义响应

【解决方案2】：

您可以像这样添加自定义验证方法

 $.validator.addMethod('unique',
                     function(value) {
        $.get('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc','?method=getAdminUserEmail&returnFormat=json&queryformat=column&emailData='+ value,
                            function(return_data) {
                                return return_data;
                            })
                         }
                         , "this email already exists"
                    );

然后将unique 类添加到您的电子邮件字段中，或者您可以使用类似这样的内容

$.validator.addClassRules("unique-email", {
                unique: true
            });

【讨论】：

【解决方案3】：

试试这个：

$.validator.addMethod('unique', 
            function(value) {
         var result = $.ajax({ 
                             async:false, 
                             url:"http://yoursamedomain.com/checkemail",
                             data:'email='+ value, 
                             dataType:"text" }); 

         if(result .responseText) return true; else return false;

             } , "This email address has already been  registered");

【讨论】：

您好，非常感谢您的回复，我已经从这个项目继续前进，因此无法应用您的反馈。我相信它会派上用场，但下次我使用 jQuery 时。谢谢

【解决方案4】：

对于服务器端 AJAX 验证，请使用 remote 规则。这与标准 jQuery AJAX 请求对象相同。您的服务器必须返回字符串“true”表示有效值或返回“false”表示无效，也可以传递一些字符串“This email was already taken”，这将被视为无效，并呈现为错误消息：

$( "#myform" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $( "#username" ).val();
          }
        }
      }
    }
  }
});

在此处阅读文档remote-method

【讨论】：