标签：非空 vue form rules required trigger blur message true

<el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
<el-form
ref="dataForm"
:rules="rules"
:model="dataForm"
status-icon
label-position="left"
label-width="100px"
style="width: 400px; margin-left:50px;"
>
<el-form-item label="id" prop="id" hidden>
<el-input v-model="dataForm.id" />
</el-form-item>
<el-form-item label="审核状态" prop="status" label-width="120px" >
<el-radio v-model="dataForm.status" label="1" border @click="statusVisible = false">通过</el-radio>
<el-radio v-model="dataForm.status" label="2" border @click="statusVisible = true">驳回</el-radio>
</el-form-item>
<el-form-item label="佣金比例（%）" label-width="120px" prop="commission" :rules="dataForm.status!=2?rules.commission:[{ required: false, message: '请填写团长佣金比例（%）', trigger: 'blur' }]" >
<el-input v-model="dataForm.commission" />
</el-form-item>
<div :visible.sync="statusVisible">
<el-form-item label="备注说明" label-width="120px" prop="remarks" :rules="dataForm.status!=2?rules.remarks:[{ required: true, message: '请填写驳回原因', trigger: 'blur' }]" >
<el-input v-model="dataForm.remarks" type="textarea" />
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button :loading="submiting" type="primary" @click="applySubmit">确定</el-button>
</div>
</el-dialog>
rules: {
status: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
remarks: [{ required: false, message: '请填写驳回原因', trigger: 'blur' }],
commission: [{ required: true, message: '请填写团长佣金比例（%）', trigger: 'blur' }]
}
上述代码为核心实现区域；

下面是效果图；核心控制在于

<el-form-item label="佣金比例（%）" label-width="120px" prop="commission" :rules="dataForm.status!=2?rules.commission:[{ required: false, message: '请填写团长佣金比例（%）', trigger: 'blur' }]" >
<el-input v-model="dataForm.commission" />
</el-form-item>
<div :visible.sync="statusVisible">
<el-form-item label="备注说明" label-width="120px" prop="remarks" :rules="dataForm.status!=2?rules.remarks:[{ required: true, message: '请填写驳回原因', trigger: 'blur' }]" >
<el-input v-model="dataForm.remarks" type="textarea" />
</el-form-item>
</div>

rules: {undefined
status: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
remarks: [{ required: false, message: '请填写驳回原因', trigger: 'blur' }],
commission: [{ required: true, message: '请填写团长佣金比例（%）', trigger: 'blur' }]
}

————————————————
版权声明：本文为CSDN博主「法法-發發發」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xingfaup/article/details/110912564

标签：非空,vue,form,rules,required,trigger,blur,message,true
来源： https://www.cnblogs.com/javalinux/p/15619584.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。