test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-03 20:58:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
44a85b8e60
element/examples/docs/es/form.md

911 lines
32 KiB
Markdown
Raw Normal View History

scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('Please input the age'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error('Two inputs don\'t match!'));
} else {
callback();
}
};
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
sizeForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formInline: {
user: '',
region: ''
},
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
},
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
ruleForm2: {
pass: '',
checkPass: '',
age: ''
},
formLabelWidth: '80px',
options: [
],
rules: {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
],
region: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
],
resource: [
{ required: true, message: 'Please select activity resource', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' }
]
},
rules2: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
},
dynamicValidateForm: {
domains: [{
key: Date.now(),
value: ''
}],
email: ''
},
numberValidateForm: {
age: ''
}
};
},
methods: {
onSubmit() {
console.log('submit!');
},
onRuleFormSubmit() {
console.log('onRuleFormSubmit');
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
key: Date.now(),
value: ''
});
}
}
}
</script>
<style>
Chore: configure es docs
2017-12-12 12:45:09 +08:00
.demo-form.demo-es {
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
.el-select .el-input {
width: 360px;
}
.el-form {
width: 480px;
}
form.md spanish version
2017-11-10 08:54:55 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
.line {
text-align: center;
}
form.md spanish version
2017-11-10 08:54:55 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
.el-checkbox-group {
width: 320px;
margin: 0;
padding: 0;
list-style: none;
form.md spanish version
2017-11-10 08:54:55 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
&:after, &:before {
content: ' ';
display: table;
}
&:after {
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
form.md spanish version
2017-11-10 08:54:55 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
.el-checkbox {
float: left;
width: 160px;
padding-right: 20px;
margin: 0;
padding: 0;
form.md spanish version
2017-11-10 08:54:55 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
+ .el-checkbox {
margin-left: 0;
}
}
}
.demo-form-normal {
width: 480px;
}
.demo-form-inline {
width: auto;
form.md spanish version
2017-11-10 08:54:55 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
.el-input {
width: 150px;
}
> * {
margin-right: 10px;
}
}
.demo-ruleForm {
width: 480px;
form.md spanish version
2017-11-10 08:54:55 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
.el-select .el-input {
width: 360px;
}
}
.demo-dynamic {
Chore: configure es docs
2017-12-12 12:45:09 +08:00
width: 500px;
Doc: update es docs for 2.1.0 (#9581) (#9591) * Changelog: update for 2.1.0 (#9581) * Changelog: update for 2.1.0 * Changelog: update for 2.1.0 * Update date-picker.md * Update datetime-picker.md * Update time-picker.md
2018-02-01 13:43:45 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
.el-input {
margin-right: 10px;
width: 270px;
vertical-align: top;
}
}
.fr {
float: right;
}
}
</style>
## Form
form.md spanish version
2017-11-10 08:54:55 +08:00
Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
### Form básico
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
```html
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="Online activities" name="type"></el-checkbox>
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
<el-checkbox label="Offline activities" name="type"></el-checkbox>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="form.resource">
<el-radio label="Sponsor"></el-radio>
<el-radio label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
```
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
:::tip
form.md spanish version
2017-11-10 08:54:55 +08:00
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
> <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>
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on `<el-form>`.
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
:::
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
### Formulario inline
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
:::demo Establezca el atributo `inline` como `true` y el formulario sera inline.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
```html
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="Approved by">
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formInline: {
user: '',
region: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
```
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
form.md spanish version
2017-11-10 08:54:55 +08:00
### Alineamiento
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
Revision of documentation in Spanish
2017-12-03 18:03:06 +08:00
:::demo El atributo `label-position` decide cómo se alinean las etiquetas, puede estar `top` o `left`. Cuando se establece en `top`, las etiquetas se colocarán en la parte superior del campo de formulario.
form.md spanish version
2017-11-10 08:54:55 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
```html
<el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">Left</el-radio-button>
<el-radio-button label="right">Right</el-radio-button>
<el-radio-button label="top">Top</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
<el-form-item label="Name">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formLabelAlign.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
form.md spanish version
2017-11-10 08:54:55 +08:00
### Validación
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
El componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
:::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).
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
```html
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="Activity name" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone" prop="region">
<el-select v-model="ruleForm.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="Online activities" name="type"></el-checkbox>
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
<el-checkbox label="Offline activities" name="type"></el-checkbox>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="Sponsorship"></el-radio>
<el-radio label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
],
region: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
],
resource: [
{ required: true, message: 'Please select activity resource', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
form.md spanish version
2017-11-10 08:54:55 +08:00
### Reglas personalizadas de validación
Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
:::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
```html
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
Input: fix autocomplete property is not compatible with native #12513 (#12514) * fix #12513 * fix: fallback for autoComplete and print deprecated warning * fix: fix auto-complete property in select component * fix default complete value * Docs: Update document for autocomplete property change * Docs: remove redundant documents * remove unnecessary console log message\ * Update select.md * fix: add missing declaration in select.d.ts
2018-08-28 15:44:21 +08:00
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
Input: fix autocomplete property is not compatible with native #12513 (#12514) * fix #12513 * fix: fallback for autoComplete and print deprecated warning * fix: fix auto-complete property in select component * fix default complete value * Docs: Update document for autocomplete property change * Docs: remove redundant documents * remove unnecessary console log message\ * Update select.md * fix: add missing declaration in select.d.ts
2018-08-28 15:44:21 +08:00
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
<el-button @click="resetForm('ruleForm2')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('Please input the age'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error('Two inputs don\'t match!'));
} else {
callback();
}
};
return {
ruleForm2: {
pass: '',
checkPass: '',
age: ''
},
rules2: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
### Eliminar o agregar validaciones dinamicamente
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
:::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.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
```html
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
<el-form-item
prop="email"
label="Email"
:rules="[
{ required: true, message: 'Please input email address', trigger: 'blur' },
Form: fix a typo in docs (#10778)
2018-04-19 11:55:46 +08:00
{ type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'] }
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'Domain' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: 'domain can not be null', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
<el-button @click="addDomain">New domain</el-button>
<el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicValidateForm: {
domains: [{
key: 1,
value: ''
}],
email: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item);
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1);
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
key: Date.now(),
value: ''
});
}
}
}
</script>
```
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
form.md spanish version
2017-11-10 08:54:55 +08:00
### Validación numerica
Chore: configure es docs
2017-12-12 12:45:09 +08:00
:::demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
```html
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item
label="age"
prop="age"
:rules="[
{ required: true, message: 'age is required'},
{ type: 'number', message: 'age must be a number'}
]"
>
Input: fix autocomplete property is not compatible with native #12513 (#12514) * fix #12513 * fix: fallback for autoComplete and print deprecated warning * fix: fix auto-complete property in select component * fix default complete value * Docs: Update document for autocomplete property change * Docs: remove redundant documents * remove unnecessary console log message\ * Update select.md * fix: add missing declaration in select.d.ts
2018-08-28 15:44:21 +08:00
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
<el-button @click="resetForm('numberValidateForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
numberValidateForm: {
age: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
:::tip
form.md spanish version
2017-11-10 08:54:55 +08:00
Cuando un `el-form-item` está anidado en otro `el-form-item`, su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese `el-form-item`.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
form.md spanish version
2017-11-10 08:54:55 +08:00
### Tamaño del control
Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
Chore: configure es docs
2017-12-12 12:45:09 +08:00
:::demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
```html
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
<el-form-item label="Activity name">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="sizeForm.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="sizeForm.type">
<el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
<el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="sizeForm.resource" size="medium">
<el-radio border label="Sponsor"></el-radio>
<el-radio border label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
sizeForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
};
},
methods: {
onSubmit() {
console.log('submit!');
}
}
};
</script>
```
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
:::
form.md spanish version
2017-11-10 08:54:55 +08:00
### Form Atributos
FormItem: adding hide-required-asterisk attribute(#12744) * Form: adds prop to make asterisk optional on required fields * Form: adds prop to make asterisk optional on required fields * ElForm: Reverses attribute name to hide-required-asterisk, which defaults to false * Update form-item.vue * Update form.scss * Update form.md
2018-09-17 18:32:23 +08:00
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ----------------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
| model | Datos del componente | object | — | — |
| rules | Reglas de validación | object | — | — |
| inline | Si el form es inline | boolean | — | false |
| label-position | Posicion de la etiqueta | string | left / right / top | right |
| label-width | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string | — | — |
| label-suffix | sufijo de la etiqueta | string | — | — |
| hide-required-asterisk | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
| inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | — | false |
| status-icon | si desea visualizar un icono que indique el resultado de la validación | boolean | — | false |
| validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia | boolean | — | true |
| size | el tamaño de los componentes en este form | string | medium / small / mini | — |
Doc: update es docs for 2.1.0 (#9581) (#9591) * Changelog: update for 2.1.0 (#9581) * Changelog: update for 2.1.0 * Changelog: update for 2.1.0 * Update date-picker.md * Update datetime-picker.md * Update time-picker.md
2018-02-01 13:43:45 +08:00
| 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 |
form.md spanish version
2017-11-10 08:54:55 +08:00
### Form Metodos
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
| Metodo | Descripción | Parametros |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| 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)) |
| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) |
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
| 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) |
form.md spanish version
2017-11-10 08:54:55 +08:00
Form: add validate event (#10351)
2018-03-25 22:32:22 +08:00
### Form Events
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
Form: emits error message on validate event (#12860) * Form: Emits error message on validate events * Update form.md
2018-09-26 10:50:50 +08:00
| Nombre | Descripción | Parametros |
| -------- | ---------------------------------------------------- | ------------------------------------------------------------ |
| 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, mensaje de error si existe. |
Form: add validate event (#10351)
2018-03-25 22:32:22 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
### Form-Item Atributos
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
| 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` | |
| label | etiqueta | string | — | — |
| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | — | false |
| rules | reglas de validacion del form | object | — | — |
form.md spanish version
2017-11-10 08:54:55 +08:00
| error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — |
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
| inline-message | mensaje de validación estilo inline | boolean | — | false |
| size | Tamaño de los componentes en este form item | string | medium / small / mini | - |
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
### Form-Item Slot
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
| Nombre | Descripción |
| ------ | ------------------------ |
| — | contenido del Form Item |
| label | contenido de la etiqueta |
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
FormItem: using slot-scope to display validation message (#12715) * Updated el-form-item to accept custom error message via slot * FormItem: updated slot name in docs * updated spanish and chinese translations * Update form.md * Update form.md * Update form.md * Update form.md
2018-09-13 18:19:44 +08:00
### Form-Item Scoped Slot
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
| Name | Description |
| ----- | -------------------------------------------------------------------------------------------------- |
| error | Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error } |
FormItem: using slot-scope to display validation message (#12715) * Updated el-form-item to accept custom error message via slot * FormItem: updated slot name in docs * updated spanish and chinese translations * Update form.md * Update form.md * Update form.md * Update form.md
2018-09-13 18:19:44 +08:00
form.md spanish version
2017-11-10 08:54:55 +08:00
### Form-Item Metodo
scaffolding Spanish docs
2017-11-06 19:22:02 +08:00
docs: update Spanish doc for 2.4.7 (#12770) * update Spanish Doc * update Spanish Doc * update Spanish Doc
2018-09-14 19:18:50 +08:00
| Metodo | Descripción | Parametros |
| ------------- | ----------------------------------------------------------- | ---------- |
| resetField | restablecer campo actual y eliminar resultado de validación | — |
| clearValidate | elimina el estado de la validacion de un campo | - |
Reference in New Issue Copy Permalink