docs: modify validators docs (#233)
This commit is contained in:
parent
c73675710f
commit
e502d1d9cf
1 changed files with 26 additions and 24 deletions
|
@ -10,8 +10,8 @@ The `Validators` class provides a set of built-in validators that can be used by
|
|||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, {FormGroup} from "@astro-reactive/form"
|
||||
import {Validators} from "@astro-reactive/validator"
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
|
@ -24,7 +24,7 @@ const form = new FormGroup([
|
|||
label: "Password",
|
||||
validators: [Validators.required, Validators.minLength(8)],
|
||||
},
|
||||
]);
|
||||
])
|
||||
---
|
||||
|
||||
<Form formGroups={form} />
|
||||
|
@ -48,8 +48,8 @@ The `Validators.required` validator is used to ensure that a form control has a
|
|||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, {FormGroup} from "@astro-reactive/form"
|
||||
import {Validators} from "@astro-reactive/validator"
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
|
@ -57,7 +57,7 @@ const form = new FormGroup([
|
|||
label: "Username",
|
||||
validators: [Validators.required],
|
||||
},
|
||||
]);
|
||||
])
|
||||
---
|
||||
|
||||
<Form formGroups={form} />
|
||||
|
@ -69,8 +69,8 @@ The `Validators.requiredChecked` validator is used to ensure that a checkbox is
|
|||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, {FormGroup} from "@astro-reactive/form"
|
||||
import {Validators} from "@astro-reactive/validator"
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
|
@ -79,7 +79,7 @@ const form = new FormGroup([
|
|||
type: "checkbox",
|
||||
validators: [Validators.requiredChecked],
|
||||
},
|
||||
]);
|
||||
])
|
||||
---
|
||||
|
||||
<Form formGroups={form} />
|
||||
|
@ -91,8 +91,8 @@ The `Validators.email` validator is used to ensure that a form control has a val
|
|||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, {FormGroup} from "@astro-reactive/form"
|
||||
import {Validators} from "@astro-reactive/validator"
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
|
@ -100,7 +100,7 @@ const form = new FormGroup([
|
|||
label: "Email",
|
||||
validators: [Validators.email],
|
||||
},
|
||||
]);
|
||||
])
|
||||
---
|
||||
|
||||
<Form formGroups={form} />
|
||||
|
@ -112,16 +112,17 @@ The `Validators.min` validator is used to ensure that the numeric value of form
|
|||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, {FormGroup} from "@astro-reactive/form"
|
||||
import {Validators} from "@astro-reactive/validator"
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
name: "price",
|
||||
label: "Price",
|
||||
type: "number",
|
||||
validators: [Validators.min(8)],
|
||||
},
|
||||
]);
|
||||
])
|
||||
---
|
||||
|
||||
<Form formGroups={forms} />
|
||||
|
@ -133,16 +134,17 @@ The `Validators.max` validator is used to ensure that the numeric value of form
|
|||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, {FormGroup} from "@astro-reactive/form"
|
||||
import {Validators} from "@astro-reactive/validator"
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
name: "price",
|
||||
label: "Price",
|
||||
type: "number",
|
||||
validators: [Validators.max(8)],
|
||||
},
|
||||
]);
|
||||
])
|
||||
---
|
||||
|
||||
<Form formGroups={forms} />
|
||||
|
@ -154,8 +156,8 @@ The `Validators.minLength` validator is used to ensure that the length of the va
|
|||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, {FormGroup} from "@astro-reactive/form"
|
||||
import {Validators} from "@astro-reactive/validator"
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
|
@ -163,7 +165,7 @@ const form = new FormGroup([
|
|||
label: "Password",
|
||||
validators: [Validators.minLength(8)],
|
||||
},
|
||||
]);
|
||||
])
|
||||
---
|
||||
|
||||
<Form formGroups={forms} />
|
||||
|
@ -175,8 +177,8 @@ The `Validators.maxLength` validator is used to ensure that the length of the va
|
|||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, {FormGroup} from "@astro-reactive/form"
|
||||
import {Validators} from "@astro-reactive/validator"
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
|
@ -184,7 +186,7 @@ const form = new FormGroup([
|
|||
label: "Password",
|
||||
validators: [Validators.maxLength(8)],
|
||||
},
|
||||
]);
|
||||
])
|
||||
---
|
||||
|
||||
<Form formGroups={forms} />
|
||||
|
|
Loading…
Reference in a new issue