github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

improve form's docs

pull/2125/head
baiyaaaaa 2016-12-30 17:49:40 +08:00 committed by 杨奕
parent 670d52b9c4
commit b360e479db
3 changed files with 448 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
examples/docs/en-US/form.md
View File

@ -120,24 +120,27 @@
{ 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) => {
onSubmit() {
console.log('submit!');
},
onRuleFormSubmit() {
console.log('onRuleFormSubmit');
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
@ -146,52 +149,17 @@
}
});
},
handleSubmit2(ev) {
this.$refs.ruleForm2.validate(valid => {
if (valid) {
alert('Submit');
} else {
console.log('error submit!!');
return false;
}
});
},
handleSubmit3(ev) {
this.$refs.dynamicForm.validate(valid => {
if (valid) {
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

181
examples/docs/zh-CN/form.md
View File

@ -83,8 +83,6 @@
age: ''
},
formLabelWidth: '80px',
options: [
],
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
@ -120,24 +118,24 @@
{ 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) => {
onSubmit() {
console.log('submit!');
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
@ -146,52 +144,17 @@
}
});
},
handleSubmit2(ev) {
this.$refs.ruleForm2.validate(valid => {
if (valid) {
alert('申请已提交');
} else {
console.log('error submit!!');
return false;
}
});
},
handleSubmit3(ev) {
this.$refs.dynamicForm.validate(valid => {
if (valid) {
alert('申请已提交');
} 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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

501
yarn.lock
View File

File diff suppressed because it is too large Load Diff