vueel-form多规则rules验证
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
vueel-form多规则rules验证
当我们在使⽤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' }
]
},
}
},。