Schema-Driven Validation in Vue 3: vue-juan-form Puts Rules in the Schema, Not the Handlers
Vue 3 teams building schema-driven forms get a validation model that lives in data rather than scattered handlers. The layer API makes partial submits a first-class operation, which simplifies complex multi-section UIs like insurance or checkout flows.
vue-juan-form renders Vue 3 pages from a schema and lets developers attach validation rules directly to field definitions. A string DSL handles common cases: 'required|email', 'min:18|max:60', 'matches:/^1[3-9]\d{9}$/'. Rules run on the current field while editing, on the whole form at submit, and can be scoped to a specific layer via an injected 'layer' object and its check() method.
Custom rules are plain functions that throw RuleError, and reusable ones register globally with defineRule. The library also validates at the row and table level: cross-row uniqueness, sum constraints, and dynamic add-row guards all live in the schema. Failed submissions automatically scroll to and focus the first invalid field. The current release only supports Element Plus components.
The schema DSL offloads rule orchestration to a declarative string, but it substitutes a small syntax for what might be clearer function calls; teams will pay a learning curve for complex expressions like '+notAllEmpty:email,phone'.
Treating any container as a validation layer blurs the line between form, group, and table, which suits low-code builders that need uniform submission logic across heterogeneous UIs.