// 页面结构
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
class="add_user"
label-width="70px"
label-position="left"
>
<el-form-item class="add_From" label="分类名" prop="rolesDetail">
<el-input class="add_input" v-model="ruleForm.rolesDetail" />
</el-form-item>
<el-form-item class="ensure">
<el-button type="primary" @click="submitForm(ruleFormRef)"
>提交</el-button
>
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
</el-form-item>
</el-form>
// 数据源
const ruleForm = reactive({
rolesDetail: null
})
// 校验规则
const rules = reactive<FormRules>({
rolesDetail = [
{ required: true, message: '请输入信息', trigger: 'blur' },
{ min: 2, max: 8, message: '字符长度为2-10位', trigger: 'blur' }
]
})
// 注意 检验规则需要和数据源同名,否则会出现获取不到数据一直校验失败的情况
校验注意事项: