Element-ui中表单（Form）校验的几种形式及表单嵌套表格含上传（Upload）组件的 _Element-ui

知是行的主意,行是知的功夫。这篇文章主要讲述Element-ui中表单（Form）校验的几种形式及表单嵌套表格含上传（Upload）组件的相关的知识，希望能为你提供帮助。
1. Element-ui中表单（Form）校验的几种形式 1.1 基础 / 自定义在 el-form 上绑定 rules，rlues为校验规则，在 el-form-item 上绑定对应的prop；
自定义规则，validator：checkAge，自定义规则的函数。
详细的可查看 element 文档 http://element-cn.eleme.io/#/zh-CN/component/form。

< template> < el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-> < 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="resetForm(\'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(\'请输入数字值\')); } else { if (value < rule.max_age) { callback(new Error(\'必须年满18岁\')); } else { 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!\'); } else { console.log(\'error submit!!\') } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } < /script>

1.2 行间校验

< el-form :model="numberValidateForm" ref="numberValidateForm" label-> < 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-> < 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(\'请输入数字值\')); } else { if (value < rule.max_age) { callback(new Error(\'必须年满18岁\')); } else { callback(); } } }, } } < /script>

1.5 行间循环自定义校验关键代码 :prop=" domains.${index}.value" ，这是 Element-ui 规定的格式，渲染后的结果为：domains.1.value。

< template> < el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-> < 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!\'); } else { console.log(\'error submit!!\'); } }); } } } < /script>

2. 综合应用
案例中， Element-ui 表单里嵌套了表格，表格内每个单元格都能进行表单控件的输入、选择、上传文件等操作，同时能针对整个表单的规则进行校验。
【Element-ui中表单（Form）校验的几种形式及表单嵌套表格含上传（Upload）组件的】

文章图片

< template> < div> < el-button type="primary" size="mini" @click="saveTableForm(\'tableForm\')"> 保存< /el-button> < el-form :model="tableForm" ref="tableForm"> < el-table :data="https://www.songbingjia.com/android/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- :prop="\'tableData.\' + scope.$index + \'.city\'" :rules="tableDataRules.city"> < el-select size="mini" v-model="scope.row.city" placeholder="请选择" clearable> < el-option v-for="item in scope.row.cityOPtions" :key="item.value" :label="item.label" :value="https://www.songbingjia.com/android/item.value"> < /el-option> < /el-select> < /el-form-item> < /template> < /el-table-column> < el-table-column label="操作人"> < template slot-scope="scope"> < el-form-item label=" " label- :prop="\'tableData.\' + scope.$index + \'.name\'" :rules="tableDataRules.name"> < el-input v-model="scope.row.name" placeholder="操作人" /> < /el-form-item> < /template> < /el-table-column> < el-table-column label="文件"> < template slot-scope="scope"> < el-form-item label=" " label- :prop="\'tableData.\' + scope.$index + \'.file\'" :rules="tableDataRules.file"> < !-- 在组件的回调函数里加一个索引的参数 --> < el-upload multiple action="https://jsonplaceholder.typicode.com/posts/" :on-progress="function(event,file,fileList){ return handleUploadProgress(event,file,fileList)}" :on-remove="function(file,fileList){ return handleUploadRemove(file,fileList,scope.$index)}" :on-success="function(res,file,fileList){ return handleUploadSuccess(res,file,fileList,scope.$index)}" :file-list="uploadFileList[scope.$index]"> < el-button type="text"> 上传文件< /el-button> < /el-upload> < /el-form-item> < /template> < /el-table-column> < /el-table> < /el-form> < /div> < /template> < script> export default { data() { return { tableForm: { tableData: [ { province: "湖北", city: "", cityOPtions:[ {label: \'武汉市\',value:\'武汉市\'}, {label: \'宜昌市\',value:\'宜昌市\'} ], name: "", file:\'\', },{ province: "重庆", city: "", cityOPtions:[ {label: \'渝北区\',value:\'渝北区\'}, {label: \'九龙坡区\',value:\'九龙坡区\'} ], name: "", file:\'\', }, ], }, tableDataRules: { name: [ { required: true, message: "请输入姓名", trigger: "blur" }, ], city: [ { required: true, message: "请选择城市", trigger: "change" }, ], file: [ { required: true, message: "请上传文件", trigger: "change" }, ], }, uploadFileList:[[]], // 上传文件列表 }; }, methods: { // 保存 saveTableForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { console.log(\'校验通过\',this.tableForm,this.uploadFileList) } }); }, // 预览图片 handleUploadProgress(event,file,fileList) {}, // 删除图片 handleUploadRemove(file, fileList, index) { this.tableForm.tableData[index].file = \'\'; this.uploadFileList[index] = fileList; }, // 文件上传 handleUploadSuccess(res, file, fileList, index) { this.tableForm.tableData[index].file = res.id; // 上传之后,把返回的fileList赋值给对应组件的fileList this.uploadFileList[index] = fileList; } }, }; < /script>