Question

我有一个用户输入的基本表单设置（名字，姓氏，电子邮件）。我有jQuery和验证插件正确导入。我的验证配置是：

$(document).ready(function() {
    $("#form").validate({meta: "validate"});
});

根据可以找到的here和here插件的文档，这应该意味着我可以为每个要验证的输入添加细节。因此，我有这个：

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0">
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1">
<input type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address.', email:'Please enter a valid email address.'}}}" id="em2">

每个都有自己的标签，我已经省略了。

我的CSS设置如下：

label.error {
    color: red;
    font-weight: bold;
}

在单击提交后在表单上将所有三个字段留空时，名字和姓氏分别显示红色错误消息（Please enter your first name.和Please enter your last name.。但是，没有出现错误消息电子邮件。如果我输入格式无效的电子邮件地址，我仍然没有收到任何消息。我已经谷歌搜索了一段时间并阅读了文档，但我似乎无法确定这可能会失败的地方。

由于

注意：为了简单起见，我的源代码已编辑了ID和名称。

Answer 1

您可能只需要将类设置为“必需的电子邮件”，而不是当前的验证选项配置。以下是适用于我的修改后的演示代码：

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0">
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1">
<input type="text" name="em" value="" class="required email" id="em2">

javascript和css保持不变。

<script type="text/javascript">
$(document).ready(function() {
    $("#form").validate({meta: "validate"});
});
</script>
<style type="text/css" media="screen">
    label.error {
    color: red;
    font-weight: bold;
}
</style>

为表单字段的每个类集运行验证规则，并显示每个规则的标准错误。在此示例中，首先运行“required”规则并显示错误“此字段是必需的”，并且一旦字段不为空，则运行“email”验证规则，直到字段值与规则测试的电子邮件格式匹配。

如果您想要更多地控制错误消息，可以在“validate”函数调用中传递更多配置，如下所示：

$("#form").validate({
       rules: {
         fn: "required",
         ln: "required",
         em: {
           required: true,
           email: true
         }
       },
       messages: {
         fn: "Please specify your first name",
         ln: "Please specify your last name",
         em: {
           required: "We need your email address to contact you",
           email: "Your email address must be in the format of name@domain.com"
         }
       }
    });

Answer 2

我之前有使用此插件的经验。据我所知，试试这个，

<script id="demo" type="text/javascript">
jQuery(document).ready(function($) {
    var validator = $("#your_form_id").validate({
        rules: {
            fn: "required",
            ln: "required",
            em: {
                required: true,
                email: true,
            },
        },
        messages: {
            fn: "Please enter your first name.",
            ln: "Please enter your last name.",
            em: {
                required: "Please enter your email address.",
                email: "Please enter a valid email address.",
            },
        },
        errorPlacement: function(error, element) {
                error.appendTo( element.parent().next() );
        },
        success: function(label) {
            label.html("OK").addClass("checked");
        }
    });
});
</script>

在你的HTML中;

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn"><span class="status"></span><br> 
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln"><span class="status"></span><br>
<input type="text" name="em" value="" class="required" id="em"><span class="status"></span><br>

这将向相应输入元素附近的<span class="status">显示错误消息。同时使用CSS设置success和error消息的样式;

#your_form_id label.error {
  background:url("error.png") no-repeat 0px 0px;
  color: #CC0000;
}
#your_form_id label.checked {
  background:url("checked.png") no-repeat 0px 0px;
  color: #008000;
}
#your_form_id .success_msg {
  color: #008000;
}

如果您仍想使用Meta，则下面是完整代码，为我工作费用

<head>
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#commentForm").validate({meta: "validate"});
});
</script>
</head>
<body>
<form id="commentForm" method="post" action="test.php">
<input id="fn0" type="text" name="fn" value="" class="required" title="Please enter your first name."><br />
<input id="ln1" type="text" name="ln" value="" class="required" title="Please enter your last name."><br />
<input id="em2" type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/><br />
<input class="submit" type="submit" value="Submit"/>
</form>
</body>

希望这会有所帮助。

Answer 3

Meta可以与已存在的验证方法一起使用，正如您对Firstname和Lastname字段所做的那样。要添加自己的验证方法，请使用以下内容：

$.validator.addMethod('own_method_name', function(value, element){
    var matches = value.match(/[ a-z0-9?%-]+/gi);
    return matches.length > 0 && matches[0] == value;
}, 'Default error message');

和

<input type="text" name="em" value="" class="required email own_method_name" id="em2">

注意：在这种情况下（通过元素元的多个规则），您将无法指定自己的错误消息，并且只能使用默认消息。

jQuery Validate Plugin不验证元数据

3 个答案: