案例,选择类型值为是,控制内容必填,如果内容有值,内容的字数不小于3
<template>
<div>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="类型" prop="type">
<el-select v-model="form.type" placeholder="请选择类型">
<el-option label="是" value="1"></el-option>
<el-option label="否" value="2"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="内容" :prop="form.type == '1' ? 'content' : ''"> -->
<el-form-item label="内容" prop="content" :rules="[{required: form.type == '1', message: '必填'},{ pattern: /^.{3,}$/, message: '输入内容长度不能小于3', trigger: 'blur' } ]">
<el-input v-model="form.content" placeholder="请输入内容"></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>
</div>
</template>
<script>
export default {
data() {
return {
form: {
type: null,
content: null,
},
rules: {
type: [{ required: true, message: "必填", trigger: "blur" }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped>
</style>
核心代码配置项
prop="content"
:rules="[{required: form.type == '1', message: '必填'},{ pattern: /^.{3,}$/, message: '输入内容长度不能小于3', trigger: 'blur' } ]"
注意:在el-form-item标签上添加了rules,必须得添加上prop的属性和值才生效prop的值可以是任意的唯一值