如何使用服务器端验证生成客户端验证？

Posted 2023-02-26

【中文标题】如何使用服务器端验证生成客户端验证？

【英文标题】：How to generate client-side validations using server-side validations?

【发布时间】：2019-01-16 08:41:06

【问题描述】：

在我的例子中，当服务器端 @Valid 失败时，响应包含每个目标输入的错误消息。所以我不必编写客户端验证。但我想预先使用客户端验证来最小化请求。但是我很懒，我发现自己编写了两次基本相同的验证代码。

有没有办法使用服务器端验证生成客户端验证？

【参考方案1】：

如果您在服务器端使用注解进行验证，您可以根据它们生成客户端验证。

示例：

public class MyObject
   @Size(min=2, max=30, message ="Invalid size")
   private String name;
   //getters & setters

如果您使用 jQuery 验证插件，您可以在每个字段上添加目标验证。有关详细信息，请参阅参考： https://jqueryvalidation.org/reference/

您可以获取所有字段并查看其注释：

Field[] fields = MyObject.class.getDeclaredFields();

并从中获取目标注释：

Map<String, Set<String>> validationsRules = new HashMap<>();
Field field = fields[0]; // here you should iterate over all fields
Size size = field.getAnnotation(Size.class);
Set<String> dataAttributes = new HashSet<>();
dataAttributes.add("data-rule-minlength=" + size.min());
dataAttributes.add("data-rule-maxlength=" + size.max());
dataAttributes.add("data-msg-minlength=" + size.message());
dataAttributes.add("data-msg-maxlength=" + size.message());
validationsRules.put(field.getName(), dataAttributes);

验证规则必须添加到视图并附加到每个字段。您的最终 html 将是这样的：

<input name="name" data-rule-minlength=2 data-rule-maxlength=30 data-msg-minlength="Invalid size" data-msg-maxlength="Invalid size"/>