1

我正在创建一个基于 JSON 数据的表单向导。我已经创建了一个基于 JSON 提要的表单，并且工作正常，接下来是如何将 jquery validation.js 合并到我的代码中。

我在这里使用 jquery.dfrom 生成基于 JSON 示例的表单 https://github.com/daffl/jquery.dform

接下来，我想在提交之前验证为用户输入生成的表单。

我如何验证这个生成的 html 表单？谢谢

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>JSOn based form wizard jQuery dForm</title>
    </head>
    <style type="text/css">
        input, label {
            display: block;
            margin-bottom: 5px;
        }
    </style>
    <body>


    <form id="demo-2-form"></form>


    <!-- Load jQuery and the minified plugin -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="dist/jquery.validate.js"></script>
    <script type="text/javascript" src="dist/jquery.dform-1.0.1.js"></script>


    <script type="text/javascript" class="demo" id="demo-2">
    $('#demo-2-form').dform({
        "action":"index.html",
        "method":"post",
        "html":[
            {
                "type":"fieldset",
                "caption":"User information",
                "html":[
                    {
                        "name":"email",
                        "caption":"Email address",
                        "type":"text",
                        "placeholder":"E.g. user@example.com",
                        "validate":{
                            "email":true
                        }
                    },
                    {
                        "name":"password",
                        "caption":"Password",
                        "type":"password",
                        "id":"registration-password",
                        "validate":{
                            "required":true,
                            "minlength":5,
                            "messages":{
                                "required":"Please enter a password",
                                "minlength":"At least {0} characters long"
                            }
                        }
                    },
                    {
                        "name":"password-repeat",
                        "caption":"Repeat password",
                        "type":"password",
                        "validate":{
                            "equalTo":"#registration-password",
                            "messages":{
                                "equalTo":"Please repeat your password"
                            }
                        }
                    },
                    {
                        "type":"radiobuttons",
                        "caption":"Sex",
                        "name":"sex",
                        "class":"labellist",
                        "options":{
                            "f":"Female",
                            "m":"Male"
                        }
                    },
                    {
                        "type":"checkboxes",
                        "name":"test",
                        "caption":"Receive newsletter about",
                        "class":"labellist",
                        "options":{
                            "updates":"Product updates",
                            "errors":{
                                "value":"security",
                                "caption":"Security warnings",
                                "checked":"checked"
                            }
                        }
                    }
                ]
            },
            {
                "type":"fieldset",
                "caption":"Address information",
                "html":[
                    {
                        "name":"name",
                        "caption":"Your name",
                        "type":"text",
                        "placeholder":"E.g. John Doe"
                    },
                    {
                        "name":"address",
                        "caption":"Address",
                        "type":"text",
                        "validate":{ "required":true }
                    },
                    {
                        "name":"zip",
                        "caption":"ZIP code",
                        "type":"text",
                        "size":5,
                        "validate":{ "required":true }
                    },
                    {
                        "name":"city",
                        "caption":"City",
                        "type":"text",
                        "validate":{ "required":true }
                    },
                    {
                        "type":"select",
                        "name":"continent",
                        "caption":"Choose a continent",
                        "options":{
                            "america":"America",
                            "europe":{
                                "selected":"true",
                                "id":"europe-option",
                                "value":"europe",
                                "html":"Europe"
                            },
                            "asia":"Asia",
                            "africa":"Africa",
                            "australia":"Australia"
                        }
                    }
                ]
            },
            {
                "type":"submit",
                "value":"Signup"
            }
        ]
    });
    </script>
    </body>
    </html>
4

1 回答 1

1

我假设您指的是这个插件进行验证，在这种情况下，您需要向表单添加类以告诉它您需要哪种类型的验证。从您的代码示例看来，这不是您所追求的确切库，但就实现而言它应该是相似的。将来，请务必指定这些内容 - 此类细节非常重要。

dform 插件没有内置回调，因此您无法确切知道表单何时出现在页面上。这意味着任何立即在表单上运行的验证插件都将难以实现，因为缺少回调。另一方面，如果您正在使用一个验证插件，该插件仅通过将提交处理程序附加到表单来工作，它应该通过调用它而不对代码进行额外更改来工作，正如 Kevin B 在第一条评论中建议的那样.

无论哪种方式，只要您在提交表单后以编程方式运行验证插件，就可以了。您应该能够为任何体面的插件执行此操作 - 我在上面链接到的 jquery 验证确实具有此功能（尽管它并不能很好地完成工作）。你会像这样运行它：

$('#demo-2-form').on('submit', function(e){
  e.preventDefault();
  if ($(this).validate().form()) {
    $(this).submit();
  } else {
    console.log("fill your form out right man!");
  }
});

这将根据您设置的参数验证表单，但是对于这个特定的插件并没有给您返回很多有用的信息来标记错误的位置。您可以使用其他方法来执行此操作（对于此插件，您必须遍历每个字段以检查是否有错误），但我认为这不值得在这里写出来。

真的，我还没有遇到一个好的 javascript 验证库（我的同事也没有）。在这里捕获提交并自己编写验证可能是值得的 - 这样会更清楚，您可以按照自己的方式自定义它。此外，这些验证中的每一个都可以写在一行左右的 javascript 中。这通常是我最终要做的事情，而且几乎不需要更多时间。您可以使用与上面相同的方法来捕获提交，只需将 jquery validate plugin 行替换为检查您的字段并验证它们的几行。

于 2012-10-16T15:15:54.247 回答