使用 JQuery 验证表单时出现问题答案

【问题标题】：Issue while validating the form using JQuery使用 JQuery 验证表单时出现问题
【发布时间】：2013-09-13 00:33:58
【问题描述】：

脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#Field2").rules("add", { regex: "^[a-zA-Z0-9]{0,3}$" });
        $.validator.addMethod(
                'regex',
                function (value, element, regexp) {
                    var re = new RegExp(regexp);
                    return this.optional(element) || re.test(value);
                }, "My Error Message");

        $('#MyForm').validate(
            {
                rules: {
                    Field1: {
                        required: false,
                        range: [1, 9999999999]
                    }
                },
                messages: {
                    Field1: {
                        range: jQuery.validator.format("Please enter a value between {0} and {1}.")
                    }
                }
                ,
                highlight: function (element) {
                    $(element).closest('.MyForm').removeClass('success').addClass('error');
                },
                success: function (element) {
                }
            });
    });                   

</script>

表格

<form action="#" id="MyForm" name="MyForm">
<table id="tblData">
    <tr>
        <td>
            <label>
                Field1</label>
            <input id="Field1" name="Field1" type="text" value="" />
        </td>
    </tr>
    <tr>
        <td>
            <label>
                Field2</label>
            <input id="Field2" name="Field2" />
        </td>
    </tr>
    <tr>
        <td>
            <span id="submitButton" class="k-button">Next</span>
            <input type="submit" class="button" name="submitButtonTest" id="submitButtonTest"
                value="Validation Test">
        </td>
    </tr>
</table>
</form>

问题

$.data(...) 未定义
未验证 Field1。
不显示错误消息

JSFiddle

Demo is here

【问题讨论】：

建议你自己动手
使用这么旧的jQuery版本是绝对必要的吗？你确定 jquery.validate.js 与 jQuery 1.3 兼容吗？你不能使用 jQuery 1.8/1.9/2.0 吗？
我在您发布的代码中的任何地方都没有看到$.data()，因此该错误来自其他地方。
为什么要同时加载jquery.validate.min.js 和jquery.validate.js。重复可能会导致问题。
演示：Uncaught TypeError: Cannot read property 'settings' of undefined

标签： validation jquery jquery-validate

【解决方案1】：

在为包含该字段的表单启用验证之前，您不能为该字段定义规则。所以你需要把

$("#Field2").rules("add", { regex: "^[a-zA-Z0-9]{0,3}$" });

之后

$("#myForm").validate(...);

FIDDLE

如果要在添加规则时指定消息，可以这样做：

$("#Field2").rules("add", {
    regex: "^[a-zA-Z0-9]{0,3}$",
    messages: {
        regex: "Must be 0 to 3 alphanumeric characters"
    }
});

查看.rules()的文档

【讨论】：

+1 谢谢。最后一个问题。我们可以从这里$("#Field2").rules("add", { regex: "^[a-zA-Z0-9]{0,3}$" }); 发送消息，而不是在$.validator.addmethod 中声明。我想重复使用它。
是的，我在答案中添加了一个示例。