Question

有用的参考资料：

问题：

为什么jQuery.validation“文档”如此钝，严重缺乏基本的例子？
真正的问题：

我有一个执行AJAX调用的自定义验证程序。该调用可以返回各种值，这将需要不同的错误消息。我似乎无法辨别如何根据响应来改变错误消息。一些代码：

<html>
<head>
<script>
// Set error value variable default & scope
var checkEmailErrorMessage = "API Error";

// AJAX Failure Error
checkEmailError = function(jqXHR, textStatus, errorThrown) {
    if (jqXHR.status == 404) {
        alert("Could not find the API Server (404)");
    } else {
        alert("Some horrifying error occurred: " + textStatus);
    }
    return false;
};

// AJAX Success Handler
checkEmailResponse = function(data, code, jqXHR) {
    switch (data.code) {
        case 200:
            return true;
        case 401:
            checkEmailErrorMessage = "Duplicate Email";
            alert("Sorry, our system has detected that an account with this email address already exists");
            break;
        case 403:
            checkEmailErrorMessage = "Invalid Email";
            alert("Sorry, our system has detected that this email is forbidden");
            break
        case undefined:
            alert("An undefined error occurred.");
            break;
        default:
            alert("A horrible error occurred.");
            break;
    }
    return false;
};

// The Custom Validator
jQuery.validator.addMethod("checkEmail", function(value, element) {

    $.ajax({
        type: "POST",
        cache: "false",
        async: "false",
        url: "/json/checkEmail",
        dataType: "json",
        data: {
            email: function() {
                return $("#email").val();
            }
        },
        success: checkEmailResponse,
        error: checkEmailError
    });

}, checkEmailErrorMessage);

// The Validator Settings
form_validation_settings = {
    onkeyup: false,
    rules: {
        "email": {
            required: true,
            minlength: 2,
            maxlength: 42,
            email: true,
            checkEmail: true
        }
    }
};

// The Binding
$(document).ready(function(){
    $('#MyForm').validate(form_validation_settings);
});

</script>
</head>

<body>

    <!-- the Form -->
    <form id="MyForm">
        <input type="text" name="email"/>
        <input type="submit" name="submit"/>
    </form>

</body>
</html>

无论如何，错误消息是“API错误”。验证文档声明：

消息：可以是由“jQuery.validator.format（value）”创建的函数。

但我该怎么做呢？我调用的任何函数都需要是AJAX调用的结果。

任何想法都表示赞赏。提前谢谢！

Answer 1

您有两种选择：

Remote的工作原理是要求您返回“true”的JSON字符串。您可以将完整的错误消息作为AJAX调用中的带引号的字符串返回：

伪代码：

  print '"'.messages[code].'"';

返回错误代码，然后在您的ajax调用上设置dataFilter，将其转换为您想要的消息：

在其他地方你设置了一个像这样的消息数组：

 var messages = ['Code 0 error message','Code 1 error message', etc ];

       //in your validate rules
       remote: {
            url: 'foo.php',
            dataFilter: function (data, type) {
                return '"' + messages[data] + '"';
            },
            type: 'post'
        }

option 1，option 2

的工作示例

Answer 2

刚遇到同样的问题，并没有看到一个适合我试图做的答案，但我能够弄清楚如何做到这一点。任何胆小的人请现在避开你的眼睛。

我想做的是提供有关该字段被拒绝的确切原因的更详细信息，以便用户不会猜测输入应该是什么样子。检查主机名和正则表达式所需的验证器非常复杂（顺便说一句，你知道吗＆＃34; 0.256.1＆＃34;是valid hostname？）

无论如何，我在这里可以创建更详细的错误消息：

// helperfunctions.js
function validhostname(value) {
  if(value.length > 254) {
    return {pass: false, str: "hostname too long (" + value.length + ")." }
  }
  if(/[^a-zA-Z0-9\-_\.]/.test(value)) {
    return { pass: false, str: "No special characters besides '-' or '_'." }
  }
  ...
  return { pass: true,  str: "valid hostname." };
}

// clientfunctions.js
var hostnameval = {};

jQuery.validator.addMethod(
  "hostname", 
  function(value, element) {
    hostnameval = validhostname(value);
    return this.optional(element) || hostnameval.pass;
  },
  function() {
    var ret = hostnameval.str || "Invalid hostname.";
    hostnameval = {};
    return ret;
  }
);

到目前为止＆＃34;消息＆＃34;从来没有被称为＆＃34;方法＆＃34;返回所以我还没有看到＆＃34;无效的主机名。＆＃34;字符串显示。我希望这样做的方式不那么晦涩，并且很高兴被证明存在。

jQuery验证：可变错误消息

有用的参考资料：

问题：

2 个答案: