6

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

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

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

<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 和名称。

4

3 回答 3

5

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

<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>

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

如果您想对错误消息进行更多控制，可以在“验证”函数调用中传递更多配置，如下所示：

$("#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"
         }
       }
    });
于 2012-08-19T11:35:13.943 回答
4

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

<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>

希望这可以帮助。

于 2012-08-15T06:40:25.803 回答
1

Meta could be used with validation methods that are already exist, as you correctly do for Firstname and Lastname fields. To add your own validation method use something like this:

$.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');

And:

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

NOTE: in this case (multiple rules through element's meta) you lose an ability to specify your own error messages and can use only default ones.

于 2012-08-16T13:59:02.253 回答