Element-ui中表单（Form）校验的⼏种形式及表单嵌套表格含上传（Upload）
组。。。
1. Element-ui中表单（Form）校验的⼏种形式
1.1 基础 / ⾃定义
<template>
<el-form :model="ruleForm":rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">⽴即创建</el-button> <el-button @click="retForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
var checkAge=(rule, value, callback)=>{
if(!value){
return callback(new Error('年龄不能为空'));
}
if(!Number.isInteger(value)){
callback(new Error('请输⼊数字值'));
}el{
if(value < rule.max_age){
callback(new Error('必须年满18岁'));
}el{
callback();
}
}
};
export default{
data(){
return{
ruleForm:{
name:'',
age:''
},
rules:{
name:[
{ required:true, message:'请输⼊活动名称', trigger:'blur'},
{ min:3, max:5, message:'长度在 3 到 5 个字符', trigger:'blur'}
],
age:[
{max_age:18, validator: checkAge, trigger:'blur'}// checkAge⾃定义规则函数]
}
};
},
methods:{
submitForm(formName){
this.$refs[formName].validate((valid)=>{
if(valid){
alert('submit!');
}el{
console.log('error submit!!')
}
});
},
retForm(formName){
this.$refs[formName].retFields();
}
}
}
</script>
1.2 ⾏间校验
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px">
<el-form-item
label="年龄"
prop="age"
:rules="[
{ required:true, message:'年龄不能为空'},
{ type:'number', message:'年龄必须为数字值'}
]">
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
</el-form-item>
</el-form>
1.4 ⾏间⾃定义校验
<template>
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px">
<el-form-item
label="年龄"
prop="age"
:rules="[
{max_age:18, validator: checkAge, trigger:'blur'}
]">
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default{
data(){
return{}
},
methods:{
checkAge(rule, value, callback){
if(!value){
return callback(new Error('年龄不能为空'));
}
if(!Number.isInteger(value)){
callback(new Error('请输⼊数字值'));
}el{
if(value < rule.max_age){
callback(new Error('必须年满18岁'));
}el{
callback();
}
}
},
}
}
</script>
1.5 ⾏间循环⾃定义校验
关键代码 :prop="domains.${index}.value"，这是 Element-ui 规定的格式，渲染后的结果为：domains.1.value。
<template>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px">
<el-form-item
v-for="(item, index) in dynamicValidateForm.domains"
:key="item.index"
:label="'域名' + index"
:prop="`domains.${index}.value`"
:rules="[
{ required:true, message:'域名不能为空', trigger:'blur'},
{ reg:/^--------$/, validator: checkDomain, trigger:'blur'}
]">
<el-input v-model="item.value" placeholder="请输⼊内容"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default{
data(){
return{
dynamicValidateForm:{
domains:[
{ value:''},
{ value:''},
{ value:''},
]
}
};
},
methods:{
checkDomain(rule, value, callback){
//⾃定义校验规则
},
submitForm(formName){
this.$refs[formName].validate((valid)=>{
if(valid){
alert('submit!');
}el{
console.log('error submit!!');
}
});
}
}
}
</script>
2. 综合应⽤
案例中， Element-ui 表单⾥嵌套了表格，表格内每个单元格都能进⾏表单控件的输⼊、选择、上传⽂件等操作，同时能针对整个表单的规则进⾏校验。
<template>
<div>
<el-button type="primary" size="mini" @click="saveTableForm('tableForm')">保存</el-button> <el-form
:model="tableForm"
ref="tableForm">
<el-table
:data="tableForm.tableData"
border
stripe>
<el-table-column label="省份" prop="province"></el-table-column>
<el-table-column label="城市">
<template slot-scope="scope">
<el-form-item
label=" "
label-width="12px"
:prop="'tableData.' + scope.$index + '.city'"
:rules="tableDataRules.city">
<el-lect size="mini" v-model="w.city" placeholder="请选择" clearable>
<el-option
v-for="item w.cityOPtions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-lect>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作⼈">
<template slot-scope="scope">
<el-form-item
label=" "
label-width="12px"
:prop="'tableData.' + scope.$index + '.name'"
:rules="tableDataRules.name">
<el-input v-model="w.name" placeholder="操作⼈"/>
</el-form-item>
</template>
