使用jquery-validate（或类似的插件）和JSONSchema来验证表单。

11 浏览
0 Comments

使用jquery-validate（或类似的插件）和JSONSchema来验证表单。

我们有一个包含多个表单的Web应用程序，其中大部分表单都有几十个字段。目前，我们使用表单中输入的数据创建json对象，并将这些对象发送到REST服务，然后将数据持久化到NoSQL数据库（MongoDB）中。

目前，我们使用jquery-validator在客户端执行验证。然而，我们需要使用相同的JSONSchema对数据进行验证（在客户端和服务器端都进行验证）。

有没有办法使用jquery-validate（或其他类似的插件）来实现这一点？我在想是否有一种方法可以用JSONSchema文件替换jquery-validate定义的“rules”。

我尝试使用“Alpaca”，它可以生成和验证使用JSONSchema的表单，但我在使用Alpaca时遇到的问题是它不能处理嵌套的json对象，而我有很多嵌套的json对象，它似乎只能处理简单的json结构。

非常感谢任何帮助。

更新

假设我有以下jquery-validate规则（为了示例目的而相当简单）：

$('#formId').validate({
    rules: {
        firstField: {
            required: true
        },
        secondField: {
            required: true,
            maxlength: 80
        }
    }
});

我有以下JSONSchema文件：

{

"$schema": "http://json-schema.org/draft-03/schema#",

"type": "object",

"additionalProperties": false,

"description": "MyJsonSchema",

"properties": {

"firstField": {

"description": "some text here",

"type": "string",

"maxLength": 15,

"required": true

},

"secondField": {

"description": "some text here",

"type": "string",

"maxLength": 80,

"required": true

}

}

}

我想找到一种方法来替换jquery-validate插件中的“rules”，而只是读取JSONSchema属性，这样我就可以在JSONSchema文件中获取所有表单的验证规则（可以用于客户端和服务器端验证），而不是为每个表单编写规则。

有没有办法做到这一点？

正如我之前所说，使用类似AlpacaJS的工具，您可以从JSONSchema文件中渲染和验证表单，但我还没有能够在更复杂的json结构中使用Alpaca。

0

1 答案

0 Comments

在JavaScript中有几个JSON模式验证器。请参见JSON Schema Software页面。

该页面上缺少的是JSON Form，它既可以生成表单，也可以使用JSV进行验证。

原因：

为了确保表单数据的准确性和完整性，我们需要对表单数据进行验证。传统的验证方法是在服务器端进行验证，但这样会增加服务器的负担，同时还需要进行网页的刷新。因此，我们需要一种在客户端进行表单验证的方法。

解决方法：

使用jquery-validate或类似的工具结合JSONSchema进行表单验证是一种常见的解决方法。jquery-validate是一个流行的jQuery插件，可以轻松地对表单进行验证。JSONSchema是一种描述JSON数据结构的语言，可以用来定义表单的验证规则。

具体步骤如下：

1. 引入jquery-validate和JSONSchema的库文件。

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script src="jsonschema.js"></script>

2. 在HTML表单中添加验证规则。

<form id="myForm">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <input type="submit" value="Submit" />
</form>

3. 使用jquery-validate对表单进行验证。

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      name: {
        required: true
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      name: "Please enter your name",
      email: {
        required: "Please enter your email",
        email: "Please enter a valid email address"
      }
    }
  });
});

4. 使用JSONSchema对表单数据进行验证。

$(document).ready(function() {
  $("#myForm").submit(function(e) {
    e.preventDefault();
    var formData = $(this).serializeArray();
    var validationResult = jsonschema.validate(formData, schema);
    if (validationResult.valid) {
      // 表单数据验证通过
    } else {
      // 表单数据验证失败
    }
  });
});

通过以上步骤，我们可以使用jquery-validate和JSONSchema对表单进行验证，从而确保表单数据的准确性和完整性。这种方法可以减少服务器的负担，提高用户体验。

0