You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: examples/docs/es/form.md
+53-41Lines changed: 53 additions & 41 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -324,14 +324,16 @@ Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox
324
324
}
325
325
</script>
326
326
```
327
+
327
328
:::
328
329
329
330
:::tip
330
331
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que
332
+
331
333
> <i>Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar <b>Enter</b> en ese campo como una solicitud para enviar el formulario.</i>
332
334
333
335
Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on `<el-form>`.
334
-
:::
336
+
:::
335
337
336
338
### Formulario inline
337
339
@@ -372,6 +374,7 @@ Cuando el espacio vertical es limitado y la forma es relativamente simple, puede
372
374
}
373
375
</script>
374
376
```
377
+
375
378
:::
376
379
377
380
### Alineamiento
@@ -413,13 +416,14 @@ Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento
413
416
}
414
417
</script>
415
418
```
419
+
416
420
:::
417
421
418
422
### Validación
419
423
420
424
El componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores.
421
425
422
-
:::demo Sólo tiene que añadir el atributo `rules` en el componente `Form`, pasar las reglas de validación y establecer el atributo `prop` para `Form-Item` como una clave específica que necesita ser validada. Ver más información en [async-validator](https://github.com/yiminghe/async-validator).
426
+
:::demo Sólo tiene que añadir el atributo `rules` en el componente `Form`, pasar las reglas de validación y establecer el atributo `prop` para `Form-Item` como una clave específica que necesita ser validada. Ver más información en [async-validator](https://github.com/yiminghe/async-validator).
@@ -528,6 +532,7 @@ El componente `form` le permite verificar sus datos, ayudándole a encontrar y c
528
532
}
529
533
</script>
530
534
```
535
+
531
536
:::
532
537
533
538
### Reglas personalizadas de validación
@@ -627,9 +632,10 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
627
632
}
628
633
</script>
629
634
```
635
+
630
636
:::
631
637
632
-
### Eliminar o agregar validaciones dinamicamente
638
+
### Eliminar o agregar validaciones dinamicamente
633
639
634
640
:::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.
635
641
@@ -705,6 +711,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
705
711
}
706
712
</script>
707
713
```
714
+
708
715
:::
709
716
710
717
### Validación numerica
@@ -755,6 +762,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
755
762
}
756
763
</script>
757
764
```
765
+
758
766
:::
759
767
760
768
:::tip
@@ -831,67 +839,71 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
831
839
};
832
840
</script>
833
841
```
842
+
834
843
:::
835
844
836
845
### Form Atributos
837
846
838
-
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| inline | Si el form es inline | boolean | — | false |
852
+
| label-position | Posicion de la etiqueta. Si esta 'left' o 'right', también se necesita el prop `label-width`| string | left / right / top | right |
853
+
| label-width | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string | — | — |
854
+
| label-suffix | sufijo de la etiqueta | string | — | — |
855
+
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
856
+
| inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | — | false |
857
+
| status-icon | si desea visualizar un icono que indique el resultado de la validación | boolean | — | false |
858
+
| validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia | boolean | — | true |
859
+
| size | el tamaño de los componentes en este form | string | medium / small / mini | — |
851
860
| disabled | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | — | false |
| validate | el método para validar todo el formulario. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) |
858
-
| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) |
859
-
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
860
-
| clearValidate |limpieza de validación para determinados campos. El parámetro es un conjunto de nombres de propiedad de los elementos del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: array)
| validate | el método para validar todo el formulario. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) |
867
+
| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) |
868
+
| resetFields | restablece todos los campos y elimina el resultado de validación | —|
869
+
| clearValidate |limpieza de validación para determinados campos. El parámetro es un conjunto de nombres de propiedad de los elementos del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: array)|
| validate | se dispara después de validar un item del formulario | la propiedad (`prop name`) nombre del item del form que se esta validando, si la validacion paso o no. |
866
876
867
877
### Form-Item Atributos
868
878
869
-
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| prop | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string | keys of model that passed to `form`||
872
-
| label | etiqueta | string | — | — |
873
-
| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
874
-
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean| — | false |
875
-
| rules | reglas de validacion del form | object | — | — |
879
+
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| prop | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string | keys of model that passed to `form`||
882
+
| label | etiqueta | string | — | — |
883
+
| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
884
+
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | — | false |
885
+
| rules | reglas de validacion del form | object | — | — |
876
886
| error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — |
877
-
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
878
-
| inline-message | mensaje de validación estilo inline | boolean | — | false |
879
-
| size | Tamaño de los componentes en este form item | string | medium / small / mini | - |
887
+
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
888
+
| inline-message | mensaje de validación estilo inline | boolean | — | false |
889
+
| size | Tamaño de los componentes en este form item | string | medium / small / mini | - |
880
890
881
891
### Form-Item Slot
892
+
882
893
| Nombre | Descripción |
883
894
| ------ | ------------------------ |
884
895
| — | contenido del Form Item |
885
896
| label | contenido de la etiqueta |
886
897
887
898
### Form-Item Scoped Slot
888
-
| Name | Description |
889
-
|---------------|-------------|
890
-
| error | Custom content to display validation message. The scope parameter is { error } |
0 commit comments