Optimize front-end validation of fields

[LiteSun]

The current front-end approach

To create a route for example, the front-end will be regular [1] check for certain fields, such as name field, if the regular condition is not met, the front-end page will report an error and block the user's next operation.

The disadvantages of the current approach

The current front-end can meet the verification requirements. However, when the back-end changes the verification rules, the front-end has to passively and manually update the verification rules for the corresponding fields. If the back-end does not notify the front-end in time or misses some fields, then the synchronization of the front-end and back-end verification will be a problem, affecting the user's use.

Improvement measures

After communicating with @membphis , using jsonschema validation would be a good choice.
The front-end calls the API to get the jsonschema of the corresponding module and then maps the corresponding jsonschema rules to the corresponding field checks on the front-end. Do this when the back-end update the validation rules, the front-end can automatically synchronize the latest validation rules, reducing unnecessary development time of the front-end.

[1] regular expressions provided by the back-end, and then manually added by the front-end developers to the corresponding form form for the field validation

cc @juzhiyuan @liuxiran @guoqqqi

[juzhiyuan]

Does this method really make sense to you @LiteSun ?

[juzhiyuan]

If the back-end does not notify the front-end in time or misses some fields...

API should be public and keep up to date, once there have changes, FE should have the ability to know this. No matter backend developer notify u, or u watch API changes. Because the request body has been validated by backend, there has no need to add this checker again in FE IMO.

[moonming]

If the back-end does not notify the front-end in time or misses some fields...

API should be public and keep up to date, once there have changes, FE should have the ability to know this. No matter backend developer notify u, or u watch API changes. Because the request body has been validated by backend, there has no need to add this checker again in FE IMO.

I have the same concern with @juzhiyuan

@LiteSun Is it necessary for the front-end to do the same things as the back-end?
What are the benefits of doing it twice?

[LiteSun]

The advantage of this is that the front-end can dynamically extract the back-end jsonschema rules through the api if feasible, and the front-end does not need to manually update the rules if the back-end makes changes to them.

For example:

[juzhiyuan]

ok to fetch regex rules from API and apply them to FE.

[liuxiran]

May I ask when do FE call the api sync validation condition? after each form page rendered or just a way in code development?@LiteSun

In general, the FE input validation is used to save unnecessary requests and improve the user experience, if we add a request to get the validate condition from BE after each form page rendered, It would the same as submitting data directly to the back end for validation.

[LiteSun]

when does FE call the API sync validation condition is: After each form page rendered.

The advantage of this is that you can get the regex dynamically(If we can parse out the corresponding regex rules from the jsonschema), without having to manually change the regex rules for the corresponding fields.

[nic-chen]

I think it’s better to get the validation rules through the API that exposes the schema on the backend, to avoid the need to manually synchronize the rules every time

[wmdmomo]

I want to make the content of the plugin form.

[juzhiyuan]

@wmdmomo Hi, thanks for your contribution! We will review those PRs ASAP.