element-ui form表单rules验证同一个表单不同的两个字段之间的相互验证

最新推荐文章于 2024-07-16 11:10:04 发布

原创最新推荐文章于 2024-07-16 11:10:04 发布 · 8.1k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #elementui

博客围绕需求‘持续时间不能小于结算周期’展开，介绍了合理与不合理选择时的效果。给出了代码实现，包括form表单代码和rules验证，重点强调el - select里el - option的value用数值可进行比较，相关验证方法需写在data里return之前。

需求: 持续时间不能小于结算周期

效果:
选择合理,无须提示
在这里插入图片描述

选择不合理,则提示

1.先选结算周期为 ‘一个季度’ ,再选持续时间为 ‘一个月’ ,得到持续时间提示
在这里插入图片描述

2.先选持续时间为 '一个月' ,再选结算周期为 '一个季度',得到结算周期提示

在这里插入图片描述

3.先选持续时间为 '一个月' ,接着选结算周期为 '一个季度', 再接着持续时间换成 '半年',清除提示,最后再选持续时间为一个月, 得到结算周期和持续时间两个字段的提示.

在这里插入图片描述

代码实现

form 表单代码:

<el-form-item label="结算周期:" label-width="120px" prop="settlementPeriod">
      	 <el-select v-model="contractInfo.settlementPeriod" placeholder="请选择活动区域" style="width: 100%;">
		     	<el-option label="一个月" value="1" />
		        <el-option label="一个季度" value="2" />
		        <el-option label="半年" value="3" />
		        <el-option label="一年" value="4" />
       	</el-select>
</el-form-item>

<el-form-item label="持续时间:" label-width="120px" prop="duration">
       	 <el-select v-model="contractInfo.duration" placeholder="请选择活动区域" style="width: 100%;">
	           <el-option label="一个月" value="1" />
	           <el-option label="一个季度" value="2" />
	           <el-option label="半年" value="3" />
	           <el-option label="一年" value="4" />
  	 	</el-select>
</el-form-item>

rules验证:

data() {
// 此方法一定要写在data里面,return前面,写在其他地方,拿不到this.contractInfo.duration 和 this.contractInfo.settlementPeriod
const settlementPeriodRule = (rule, value, callback) => {
      if (this.contractInfo.duration !== '') {
        if (Number(value) > Number(this.contractInfo.duration)) {
          callback(new Error('结算周期必须小于持续时间'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const durationRule = (rule, value, callback) => {
      if (this.contractInfo.settlementPeriod !== '') {
        if (Number(value) < Number(this.contractInfo.settlementPeriod)) {
          callback(new Error('持续时间必须大于结算周期'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
		rules: { // 验证规则
			settlementPeriod: [
		          { required: true, message: '结算周期', trigger: 'blur' },   // 验证结算周期输入是否为空
		          { validator: settlementPeriodRule, trigger: 'change' }  //结算周期不为空时的验证
		        ],
		        duration: [
		          { required: true, message: '持续时间', trigger: 'blur' },
		          { validator: durationRule, trigger: 'change' }
		        ]
		}
	}
}

重点

el-select 里面el-option 的value 为数值,使用数值就能进行比较
settlementPeriodRule() 和 durationRule() 方法写在data里面,return 之前,这样能保证 this.contractInfo.duration 和 this.contractInfo.settlementPeriod