Skip to content

E
Element
Commit b360e479 authored by baiyaaaaa's avatar baiyaaaaa Committed by 杨奕
Browse files
Options

improve form's docs

parent 670d52b9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 432 additions and 402 deletions
examples/docs/en-US/form.md
View file @ b360e479
......@@ -120,78 +120,46 @@
{ validator: checkAge, trigger: 'blur' }
]
},
dynamicForm: {
dynamicValidateForm: {
domains: [{
key: Date.now(),
value: ''
}],
email: ''
},
dynamicRule: {
email: [
{ required: true, message: 'Please input email address', trigger: 'blur' },
{ type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
]
numberValidateForm: {
age: ''
}
};
},
methods: {
handleSubmit(ev) {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
onSubmit() {
console.log('submit!');
},
handleSubmit2(ev) {
this.$refs.ruleForm2.validate(valid => {
if (valid) {
alert('Submit');
} else {
console.log('error submit!!');
return false;
}
});
onRuleFormSubmit() {
console.log('onRuleFormSubmit');
},
handleSubmit3(ev) {
this.$refs.dynamicForm.validate(valid => {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('Submit');
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
handleReset() {
this.$refs.ruleForm.resetFields();
},
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
handleReset3() {
this.$refs.dynamicForm.resetFields();
},
handleValidate(prop, errorMsg) {
console.log(prop, errorMsg);
},
onSubmit() {
console.log('submit!');
},
onRuleFormSubmit() {
console.log('onRuleFormSubmit');
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item)
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicForm.domains.splice(index, 1)
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicForm.domains.push({
this.dynamicValidateForm.domains.push({
key: Date.now(),
value: ''
});
......@@ -552,8 +520,8 @@ Form component allows you to verify your data, helping you find and correct erro
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">Create</el-button>
<el-button @click="handleReset">Reset</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
......@@ -597,11 +565,8 @@ Form component allows you to verify your data, helping you find and correct erro
};
},
methods: {
handleReset() {
this.$refs.ruleForm.resetFields();
},
handleSubmit(ev) {
this.$refs.ruleForm.validate((valid) => {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
......@@ -609,6 +574,9 @@ Form component allows you to verify your data, helping you find and correct erro
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
......@@ -632,8 +600,8 @@ Form component allows you to verify your data, helping you find and correct erro
<el-input v-model.number="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit2">Submit</el-button>
<el-button @click="handleReset2">Reset</el-button>
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
<el-button @click="resetForm('ruleForm2')">Reset</el-button>
</el-form-item>
</el-form>
<script>
......@@ -694,11 +662,8 @@ Form component allows you to verify your data, helping you find and correct erro
};
},
methods: {
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
handleSubmit2(ev) {
this.$refs.ruleForm2.validate((valid) => {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
......@@ -706,6 +671,9 @@ Form component allows you to verify your data, helping you find and correct erro
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
......@@ -718,12 +686,19 @@ Form component allows you to verify your data, helping you find and correct erro
:::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
```html
<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="120px" class="demo-dynamic">
<el-form-item prop="email" label="Email">
<el-input v-model="dynamicForm.email"></el-input>
<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' },
{ type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicForm.domains"
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'Domain' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
......@@ -734,33 +709,27 @@ Form component allows you to verify your data, helping you find and correct erro
<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="handleSubmit3">Submit</el-button>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
<el-button @click="addDomain">New domain</el-button>
<el-button @click="handleReset3">Reset</el-button>
<el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicForm: {
dynamicValidateForm: {
domains: [{
key: 1,
value: ''
}],
email: ''
},
dynamicRule: {
email: [
{ required: true, message: 'Please input email address', trigger: 'blur' },
{ type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
]
}
};
},
methods: {
handleSubmit3(ev) {
this.$refs.dynamicForm.validate((valid) => {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
......@@ -769,17 +738,17 @@ Form component allows you to verify your data, helping you find and correct erro
}
});
},
handleReset3() {
this.$refs.dynamicForm.resetFields();
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item);
var index = this.dynamicValidateForm.domains.indexOf(item);
if (index !== -1) {
this.dynamicForm.domains.splice(index, 1);
this.dynamicValidateForm.domains.splice(index, 1);
}
},
addDomain() {
this.dynamicForm.domains.push({
this.dynamicValidateForm.domains.push({
key: Date.now(),
value: ''
});
......@@ -788,7 +757,56 @@ Form component allows you to verify your data, helping you find and correct erro
}
</script>
```
:::
:::
### Number Validate
::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
```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'}
]"
>
<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
</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>
```
:::
### Form Attributes
......
examples/docs/zh-CN/form.md
View file @ b360e479
......@@ -83,8 +83,6 @@
age: ''
},
formLabelWidth: '80px',
options: [
],
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
......@@ -120,78 +118,43 @@
{ validator: checkAge, trigger: 'blur' }
]
},
dynamicForm: {
dynamicValidateForm: {
domains: [{
value: '',
key: Date.now()
}],
email: ''
},
dynamicRule: {
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]
numberValidateForm: {
age: ''
}
};
},
methods: {
handleSubmit(ev) {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
handleSubmit2(ev) {
this.$refs.ruleForm2.validate(valid => {
if (valid) {
alert('申请已提交');
} else {
console.log('error submit!!');
return false;
}
});
onSubmit() {
console.log('submit!');
},
handleSubmit3(ev) {
this.$refs.dynamicForm.validate(valid => {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('申请已提交');
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
handleReset() {
this.$refs.ruleForm.resetFields();
},
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
handleReset3() {
this.$refs.dynamicForm.resetFields();
},
handleValidate(prop, errorMsg) {
console.log(prop, errorMsg);
},
onSubmit() {
console.log('submit!');
},
onRuleFormSubmit() {
console.log('onRuleFormSubmit');
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item)
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicForm.domains.splice(index, 1)
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicForm.domains.push({
this.dynamicValidateForm.domains.push({
value: '',
key: Date.now()
});
......@@ -545,8 +508,8 @@
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">立即创建</el-button>
<el-button @click="handleReset">重置</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
......@@ -590,11 +553,8 @@
};
},
methods: {
handleReset() {
this.$refs.ruleForm.resetFields();
},
handleSubmit(ev) {
this.$refs.ruleForm.validate((valid) => {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
......@@ -602,6 +562,9 @@
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
......@@ -624,8 +587,8 @@
<el-input v-model.number="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit2">提交</el-button>
<el-button @click="handleReset2">重置</el-button>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
</el-form-item>
</el-form>
<script>
......@@ -686,11 +649,8 @@
};
},
methods: {
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
handleSubmit2(ev) {
this.$refs.ruleForm2.validate((valid) => {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
......@@ -698,6 +658,9 @@
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
......@@ -709,12 +672,19 @@
::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
```html
<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="100px" class="demo-dynamic">
<el-form-item prop="email" label="邮箱">
<el-input v-model="dynamicForm.email"></el-input>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicForm.domains"
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
......@@ -725,32 +695,26 @@
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit3">提交</el-button>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="handleReset3">重置</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicForm: {
dynamicValidateForm: {
domains: [{
value: ''
}],
email: ''
},
dynamicRule: {
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]
}
};
},
methods: {
handleSubmit3(ev) {
this.$refs.dynamicForm.validate((valid) => {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
......@@ -759,17 +723,17 @@
}
});
},
handleReset3() {
this.$refs.dynamicForm.resetFields();
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item)
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicForm.domains.splice(index, 1)
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicForm.domains.push({
this.dynamicValidateForm.domains.push({
value: '',
key: Date.now()
});
......@@ -780,6 +744,55 @@
```
:::
### 数字类型验证
::: demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
```html
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item
label="年龄"
prop="age"
:rules="[
{ required: true, message: '年龄不能为空'},
{ type: 'number', message: '年龄必须为数字值'}
]"
>
<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
<el-button @click="resetForm('numberValidateForm')">重置</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>
```
:::
### Form Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
yarn.lock
View file @ b360e479
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment