element form表单组件对非表单内字段做校验

zluz_

已于 2022-10-12 14:49:56 修改

阅读量1.7k

点赞数 2

文章标签： javascript 前端 html

于 2022-10-12 14:48:47 首次发布

本文链接：https://blog.csdn.net/zluz_/article/details/127281459

版权

本文介绍了一种在表单中对时间范围进行有效校验的方法。通过使用Vue.js的Element UI组件库中的el-form-item和el-date-picker组件，实现了对时间范围的选择并进行了必要的表单校验。

摘要由CSDN通过智能技术生成

在日常开发写表单的时候，可能会遇到某一个form-Item中绑定的值不在表单绑定的数据对象中，如：

在这里插入图片描述

一般来说，对于时间范围，后端会给两个字段，类似 startTime、endTime。这个时候时间范围绑定一个dateArr字段来存放一个时间数组

此时用prop绑定该字段名是无效的，需要单独对这个字段进行校验。
在 form-Item 中有一个属性 error 。用于表单域验证错误信息，设置该值会使表单验证状态变为error，并显示该错误信息。

所以，可以设置一个error属性，初始值设为空，在表单校验时做一个判断，如果字段为空时给error赋值校验失败提示文字。同时加一个失去焦点时的方法 `@blur="checkDate"` ，在进行表单操作时也做校验。

<el-form-item label="时间范围" :rules="[{ required: true }]" :error="dateError">
	<el-date-picker
		v-model="dateArr"
		type="daterange"
		range-separator="至"
		start-placeholder="开始日期"
		end-placeholder="结束日期"
		value-format="yyyy-MM-dd"
		@blur="checkDate"
	/>
</el-form-item>

data() {
	return {
		dateError: '',
      	dateArr: []
	}
},
watch: {
	dateArr() {
      if (this.dateArr.length > 0) {
        this.dataForm.startTime = this.dateArr[0]
        this.dataForm.endTime = this.dateArr[1]
      } else {
        this.dataForm.startTime = ''
        this.dataForm.endTime = ''
      }
    }
},
methods: {
	checkDate() {
		if (!this.dateArr) {
			this.dateError = '请选择时间范围'
		} else {
			this.dateError = ''
		}
	},
	submit() {
		this.$refs['dataForm'].validate((valid) => {
			if (!this.dateArr) { // 在表单校验的时候对dateArr做一下校验
				this.dateError = '请选择时间范围'
			} else if (valid) {
				alert('success')
			} else {
				console.log('valid err')
			}
		})
	}