Skip to content

Commit b67c4d5

Browse files
Add joi and zod in demo
Signed-off-by: Kiran Parajuli <[email protected]>
1 parent f1cc5b4 commit b67c4d5

File tree

4 files changed

+119
-1
lines changed

4 files changed

+119
-1
lines changed

package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@
1616
},
1717
"dependencies": {
1818
"highlight.js": "^11.11.1",
19+
"joi": "^17.13.3",
1920
"pinia": "^2.3.0",
2021
"vue": "^3.5.13",
2122
"vue-formik": "^0.1.38",
2223
"vue-router": "^4.5.0",
23-
"yup": "^1.6.1"
24+
"yup": "^1.6.1",
25+
"zod": "^3.24.1"
2426
},
2527
"devDependencies": {
2628
"@playwright/test": "^1.49.1",

pnpm-lock.yaml

Lines changed: 51 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/components/home/ExpoForm.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,8 @@ const opts = computed(() => ({
143143
initialValues: InitialValues,
144144
validationSchema: props.value === DemoTabValues.CUSTOM ? props.validationSchema : undefined,
145145
yupSchema: props.value === DemoTabValues.YUP ? props.validationSchema : undefined,
146+
joiSchema: props.value === DemoTabValues.JOI ? props.validationSchema : undefined,
147+
zodSchema: props.value === DemoTabValues.ZOD ? props.validationSchema : undefined,
146148
validateOnMount: props.validateOnMount,
147149
onSubmit: (values: any, helpers: any) => {
148150
if (confirm(JSON.stringify(values, null, 2))) {

src/constants/demo.ts

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import * as Yup from "yup";
2+
import Joi from "joi";
3+
import { z } from "zod";
24

35
export const DemoTabValues = {
46
CUSTOM: 1,
57
YUP: 0,
8+
JOI: 2,
9+
ZOD: 3,
610
};
711

812
interface IContact {
@@ -122,7 +126,66 @@ export const ValidationSchemaYup = Yup.object().shape({
122126
.default([""]), // Ensures addresses array is initialized
123127
});
124128

129+
export const ValidationSchemaJoi = Joi.object({
130+
name: Joi.string().required(),
131+
email: Joi.string()
132+
.email({
133+
tlds: { allow: false },
134+
})
135+
.required(),
136+
contacts: Joi.array()
137+
.items(
138+
Joi.object({
139+
code: Joi.string()
140+
.pattern(/^\+\d{2,3}$/)
141+
.required(),
142+
number: Joi.string()
143+
.pattern(/^\d{10}$/)
144+
.required(),
145+
}),
146+
)
147+
.min(1)
148+
.required(),
149+
sex: Joi.string().required(),
150+
message: Joi.string().required(),
151+
addresses: Joi.array().items(Joi.string().min(3).max(50).required()).min(1).required(),
152+
});
153+
154+
export const ValidationSchemaZod = z.object({
155+
name: z.string().nonempty("Name is required"),
156+
email: z.string().email("Invalid email").nonempty("Email is required"),
157+
contacts: z
158+
.array(
159+
z.object({
160+
code: z
161+
.string()
162+
.regex(/^\+\d{2,3}$/, "Invalid code. Must be in format +91")
163+
.nonempty("Code is required"),
164+
number: z
165+
.string()
166+
.regex(/^\d{10}$/, "Invalid phone number. Must be 10 digits")
167+
.nonempty("Number is required"),
168+
}),
169+
)
170+
.min(1, "At least one contact is required")
171+
.nonempty("Contacts are required"),
172+
sex: z.string().nonempty("Sex is required"),
173+
message: z.string().nonempty("Message is required"),
174+
addresses: z
175+
.array(
176+
z
177+
.string()
178+
.min(3, "Address must be at least 3 characters")
179+
.max(50, "Address must be at most 50 characters")
180+
.nonempty("Address is required"),
181+
)
182+
.min(1, "At least one address is required")
183+
.nonempty("Addresses are required"),
184+
});
185+
125186
export const DemoTabs = [
126187
{ name: "Custom", value: DemoTabValues.CUSTOM, schema: ValidationSchema },
127188
{ name: "Yup", value: DemoTabValues.YUP, schema: ValidationSchemaYup },
189+
{ name: "Joi", value: DemoTabValues.JOI, schema: ValidationSchemaJoi },
190+
{ name: "Zod", value: DemoTabValues.ZOD, schema: ValidationSchemaZod },
128191
];

0 commit comments

Comments
 (0)