最后提交方法中进行数据验证
这个在之前一篇博客中简单介绍过，感兴趣的朋友可以自行前去了解
Vue关于Element对表单的校验
最最后把create.vue的源码分享给大家方便大家进行参考，如有更好的建议也请大家不吝赐教
<template> <div> <div> <el-form ref="form" :model="form" :rules="rules" > <h4>设置任务</h4> <div> <div> <span>选择考试对象</span> <el-form-item prop="roleList"> <el-select v-model="form.roleList" multiple filterable allow-create default-first-option placeholder="请选择考试对象" > <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> </div> <div> <span>截止时间</span> <el-form-item prop="deadline"> <el-date-picker v-model="form.deadline" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" /> </el-form-item> </div> </div> <h4>试卷标题</h4> <div> <div> <el-form-item prop="title"> <el-input v-model="form.title" type="text" placeholder="请输入试卷标题（1-20个字）" maxlength="20" show-word-limit /> </el-form-item> </div> </div> <question v-for="item in form.questions" :key="item.id" :question="item" @removeQuestion="removeQuestion" /> <div> <el-button v-for="item in questionType" :key="item.typeId" @click="addQuestion(item.typeId)" > <svg-icon :icon-class="item.icon" /> {{ item.typeName }} </el-button> </div> <el-button type="primary" :loading="loading" @click="submit" > 提交试卷 </el-button> </el-form> </div> </div> </template> <script> import crudRoles from '@/api/system/role' import crudExam from '@/api/exam/exam' import question from '@/views/exam/module/question' import crudList from '@/api/exam/list' export default { name: 'Create', components: { question }, data() { return { roles: [], dialogVisible: false, loading: false, questionId: 0, form: { title: '', roleList: [], // 考试对象 deadline: '', // 截止时间 questions: [] }, questionType: [], rules: { roleList: [{ required: true, message: '请选择考试对象', trigger: 'blur' }], deadline: [{ required: true, message: '请选择截止时间', trigger: 'blur' }], title: [{ required: true, message: '请输入试卷标题（1-20个字）', trigger: 'blur' }] } } }, created() { this.getRoles() this.getQuestionType() }, methods: { getRoles() { crudRoles.getAll().then(res => { res.map((obj) => { const role = { value: obj.id, label: obj.name } this.roles.push(role) }) }) }, getQuestionType() { crudExam.getQuestionType().then(res => { this.questionType = res }) }, addQuestion(typeId) { const question = { id: this.questionId, quesTypeId: typeId, title: '', score: 0, answer: [], content: [] } this.form.questions.push(question) this.questionId++ }, removeQuestion(id) { for (let i = 0; i < this.form.questions.length; i++) { if (this.form.questions[i].id === id) { this.form.questions.splice(i, 1) } } }, submit() { if (this.form.questions.length === 0) { this.$notify({ title: '警告', message: '请添加试题', type: 'warning' }) return } const form = JSON.parse(JSON.stringify(this.form)) let isSubmit = true let message = '' this.loading = true this.$refs['form'].validate(res => { if (!res) { this.loading = false return } for (let i = 0; i < form.questions.length; i++) { const question = form.questions[i] if (question.title === '') { isSubmit = false message = '请设置题目题干' break } if ((question.quesTypeId === 1 || question.quesTypeId === 2) && question.content.length === 0) { isSubmit = false message = '请设置选择题题答案' break } if ((question.quesTypeId === 1 || question.quesTypeId === 2 || question.quesTypeId === 5) && question.answer.length === 0) { isSubmit = false message = '请设置客观题选项' break } } if (!isSubmit) { this.$notify({ title: '警告', message: message, type: 'warning' }) this.loading = false return } form.questions.forEach(function(question) { question.answer = JSON.stringify(question.answer) question.content = JSON.stringify(question.content) }) crudExam.add(form).then((res) => { this.loading = false const params = { type: 2, typeId: res, url: this.$frontUrl + '/answerOnline' } crudList.remind(params).then(() => { this.$message.success('提醒成功~') }) this.$router.push('/exam/index') }).catch(() => { this.loading = false }) }) } } } </script> <style lang="scss" scoped> .card-label { margin: 30px 0 15px; } .card-panel { display: flex; flex-direction: row; padding: 17px 15px 0; color: #666; box-shadow: 0 0 3px 1px #e7e7e7; border-color: #e7e7e7; .settings-wrap { margin-right: 4%; } } .content-label { display: block; padding-bottom: 5px; } .question-type { margin-top: 20px; } .question-content { margin-top: 20px; color: #666; box-shadow: 0 0 4px 2px rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05); } </style>