我正在创建一个基于 JSON 数据的表单向导。我已经创建了一个基于 JSON feed 的表单，并且工作正常，接下来是如何将 jqueryvalidation.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>
最佳答案
我假设您指的是this plugin用于验证，在这种情况下，您需要向表单添加类以告诉它您要进行哪种类型的验证。从您的代码示例来看，这不是您想要的确切库，但就实现而言应该类似。将来，请确保指定这些内容 - 这样的细节非常重要。
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 插件行替换为检查字段并验证它们的几行即可。
关于javascript - 如何验证使用 JSON 读取的表单数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12917468/