标签：script lse 编辑 验证 red 规则 fun mode name
当我们在使用vue el-form的时候，经常会根据传入的值来动态验证表单信息，比如新建，编辑表单，不同的情况下，需要的验证方式不一样。根据这样的需求，我们有两种方法解决：
1.在data()中定义两个rule规则,用computed根据值动态验证。
<el-form class="dialog-body" :rules="rulesList" :model="temp"> <!--这里为表单内容--> </el-form> <script> export default { data() { return { rules: { pay_type: [ { required: true, message: ‘不能为空‘, trigger: ‘change‘ } ], accno: [ { required: true, message: ‘不能为空‘, trigger: ‘blur‘ } ], accname: [ { required: true, message: ‘不能为空‘, trigger: ‘blur‘ } ], otp: [ { required: true, message: ‘不能为空‘, trigger: ‘blur‘ } ], username: [ { required: true, message: ‘不能为空‘, trigger: ‘change‘ } ], otp_id: [ { required: true, message: ‘不能为空‘, trigger: ‘change‘ } ] }, rules2: { pay_type: [ { required: true, message: ‘不能为空‘, trigger: ‘change‘ } ] }, } }, computed: { rulesList: function() { if (this.temp.pay_type) { return this.rules } else { return this.rules2 } } },
2.在data()中定义多个rule规则，用三元表达式来判断当前需要的规则。
<el-form class="dialog-body" ref="from" :rules="!form.id ? ‘rules‘ : ‘rules2‘" :model="temp"> <!--这里为表单内容--> </el-form> <script> export default { data() { return { rules: { pay_type: [ { required: true, message: ‘不能为空‘, trigger: ‘change‘ } ], username: [ { required: true, message: ‘不能为空‘, trigger: ‘change‘ } ] }, rules2: { pay_type: [ { required: true, message: ‘不能为空‘, trigger: ‘change‘ } ] }, } },
标签：script lse 编辑 验证 red 规则 fun mode name
原文地址：https://www.cnblogs.com/atomgame/p/12791623.html
