1.配置表单校验的先决条件：model rules prop v-model 完成表单校验需要的前置条件
- el-form配置model和rules属性
- el-form-item配置prop属性
- 表单进行v-model双向绑定
2.js
data() { return { // 定义表单数据 formData:{ name: '', // 部门名称 code: '', // 部门编码 manager: '', // 部门管理者 introduce: '' // 部门介绍 }, // 定义校验规则 rules: { name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }, { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' }], code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' }, { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' }], manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }], introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' }, { trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }] } } }
3.html
<el-form :model="formData" :rules="rules" label-width="120px"> <el-form-item label="部门名称" prop="name"> <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" /> </el-form-item> <el-form-item label="部门编码" prop="code"> <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" /> </el-form-item> <el-form-item label="部门负责人" prop="manager"> <el-select v-model="formData.manager" style="width:80%" placeholder="请选择" /> </el-form-item> <el-form-item label="部门介绍" prop="introduce"> <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" /> </el-form-item> </el-form>
