动态表单验证

最新推荐文章于 2024-04-09 17:30:48 发布

@Herry

最新推荐文章于 2024-04-09 17:30:48 发布

阅读量1k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/aimin_com/article/details/121776325

版权

问题：

我们想在form表单中进行遍历input、select等多种选择，那么我们需要的数据结构就是：

	formList: [
				{
					value: '',
					label: '门诊号',
					prop: 'clinicNo',
					type: 'input'
				},
				{
					value: '',
					label: '住院号',
					prop: 'hospitalNo',
					type: 'input'
				},
				{
					value: '',
					label: '案例号',
					prop: 'medicalRecordNo',
					type: 'input'
				},
				{
					value: '',
					label: '就诊类型',
					prop: 'visitType',
					type: 'select',
					list: [
						{
							label: '住院',
							value: '1'
						},
						{
							label: '门诊',
							value: '2'
						},
						{
							label: '急诊',
							value: '3'
						},
						{
							label: '体检',
							value: '4'
						}
					]
				},
				{
					value: '',
					label: '就诊日期时间',
					prop: 'visitDateTime',
					type: 'datatime'
				},
				{
					value: '',
					label: '机构名称',
					prop: 'orgName',
					type: 'input'
				},
				{
					value: '',
					label: '组织机构代码',
					prop: 'orgCode',
					type: 'input'
				}
			]

注：value是输入后的值，label是显示信息，prop表示当前的名字，type表示是哪种输入框类型

解决办法：

表单验证中需要将prop与value的名字一致，然后需要将他们的结构一致。所以我们的数据结构类型如下：

// 验证值
			isVisitDialogOpenFormRules: {
				clinicNo: this.$filterRules(
					{ name: '门诊号', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				),
				hospitalNo: this.$filterRules(
					{ name: '住院号', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				),
				medicalRecordNo: this.$filterRules(
					{ name: '案例号', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				),
				visitType: this.$filterRules({
					name: '就诊类型',
					type: 2,
					required: true
				}),
				visitDateTime: this.$filterRules({
					name: '就诊日期时间',
					type: 2,
					required: true
				}),
				orgName: this.$filterRules(
					{ name: '机构名称', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				),
				orgCode: this.$filterRules(
					{ name: '组织机构代码', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				)
			},
			// value值
			isVisitDialogOpenForm: {
				clinicNo: '',
				hospitalNo: '',
				medicalRecordNo: '',
				visitType: '',
				visitDateTime: '',
				orgName: '',
				orgCode: ''
			},

html的循环结构如下：

  <el-form
        ref="refIsVisitDialogOpen"
        class="main-form"
        size="mini"
        :label-position="labelPosition"
        label-width="120px"
        :rules="isVisitDialogOpenFormRules"
        :model="isVisitDialogOpenForm"
      >
        <el-form-item
          v-for="item in formList"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
        >
          <el-input
            v-if="item.type === 'input'"
            v-model="isVisitDialogOpenForm[item.prop]"
          ></el-input>
          <el-date-picker
            v-if="item.type === 'datatime'"
            v-model="isVisitDialogOpenForm[item.prop]"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
          <el-select
            v-if="item.type === 'select'"
            v-model="isVisitDialogOpenForm[item.prop]"
            placeholder="请选择"
          >
            <el-option
              v-for="(itmList, iList) in item.list"
              :key="iList"
              :label="itmList.label"
              :value="itmList.value"
            ></el-option>
          </el-select>
        </el-form-item>

显示结果如下：

在这里插入图片描述
这样才能解决他所有的遍历可以通过后台来控制，结构缺一不可。
附上vue源码，当前是组件：

<template>
  <div>
    <dhc-dialog
      v-model="isDialog"
      title="编辑通用访视"
      width="32%"
      iconfont="iconxiugai"
      @sure="isVisitDialogOpenSure"
      @close="isVisitDialogOpenClose"
    >
      <el-form
        ref="refIsVisitDialogOpen"
        class="main-form"
        size="mini"
        :label-position="labelPosition"
        label-width="120px"
        :rules="isVisitDialogOpenFormRules"
        :model="isVisitDialogOpenForm"
      >
        <el-form-item
          v-for="item in formList"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
        >
          <el-input
            v-if="item.type === 'input'"
            v-model="isVisitDialogOpenForm[item.prop]"
          ></el-input>
          <el-date-picker
            v-if="item.type === 'datatime'"
            v-model="isVisitDialogOpenForm[item.prop]"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
          <el-select
            v-if="item.type === 'select'"
            v-model="isVisitDialogOpenForm[item.prop]"
            placeholder="请选择"
          >
            <el-option
              v-for="(itmList, iList) in item.list"
              :key="iList"
              :label="itmList.label"
              :value="itmList.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </dhc-dialog>
  </div>
</template>
<script>
export default {
	props: {
		// 是否打开此弹框
		isVisitDialogOpen: {
			type: Boolean,
			default: () => {
				return false
			}
		},
		// 当前行数据
		addVisitOpenObj: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	data() {
		return {
			// 验证值
			isVisitDialogOpenFormRules: {
				clinicNo: this.$filterRules(
					{ name: '门诊号', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				),
				hospitalNo: this.$filterRules(
					{ name: '住院号', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				),
				medicalRecordNo: this.$filterRules(
					{ name: '案例号', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				),
				visitType: this.$filterRules({
					name: '就诊类型',
					type: 2,
					required: true
				}),
				visitDateTime: this.$filterRules({
					name: '就诊日期时间',
					type: 2,
					required: true
				}),
				orgName: this.$filterRules(
					{ name: '机构名称', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				),
				orgCode: this.$filterRules(
					{ name: '组织机构代码', type: 1, required: true },
					[
						{
							pattern: /^[A-Za-z0-9]{1,200}$/,
							message: '请输入 200 位以内数字或字母'
						}
					]
				)
			},
			// value值
			isVisitDialogOpenForm: {
				clinicNo: '',
				hospitalNo: '',
				medicalRecordNo: '',
				visitType: '',
				visitDateTime: '',
				orgName: '',
				orgCode: ''
			},
			labelPosition: 'right',
			// form表单list
			formList: [
				{
					value: '',
					label: '门诊号',
					prop: 'clinicNo',
					type: 'input'
				},
				{
					value: '',
					label: '住院号',
					prop: 'hospitalNo',
					type: 'input'
				},
				{
					value: '',
					label: '案例号',
					prop: 'medicalRecordNo',
					type: 'input'
				},
				{
					value: '',
					label: '就诊类型',
					prop: 'visitType',
					type: 'select',
					list: [
						{
							label: '住院',
							value: '1'
						},
						{
							label: '门诊',
							value: '2'
						},
						{
							label: '急诊',
							value: '3'
						},
						{
							label: '体检',
							value: '4'
						}
					]
				},
				{
					value: '',
					label: '就诊日期时间',
					prop: 'visitDateTime',
					type: 'datatime'
				},
				{
					value: '',
					label: '机构名称',
					prop: 'orgName',
					type: 'input'
				},
				{
					value: '',
					label: '组织机构代码',
					prop: 'orgCode',
					type: 'input'
				}
			]
		}
	},
	computed: {
		isDialog: {
			get() {
				return this.isVisitDialogOpen
			},
			set() {}
		}
	},
	watch: {},
	mounted() {
		this.getSubjectVisitAttr()
	},
	methods: {
		// 获取数据
		getSubjectVisitAttr() {
			const data = {
				subjectCode: this.addVisitOpenObj.item.subjectCode,
				subjectVisitCode: this.addVisitOpenObj.item.code
			}
			this.$api.subjectVisitAttr.getSubjectVisitAttr(data).then(res => {
				console.log(res, 'res')
				if (res.data) {
					this.isVisitDialogOpenForm = res.data
					// this.formList.map(item => {
					// 	item.value = res?.data[item.prop]
					// })
				}
			})
		},
		// 确定按钮
		isVisitDialogOpenSure() {
			console.log('确定')
			this.$refs['refIsVisitDialogOpen'].validate(valid => {
				if (valid) {
					// alert('submit!')
					this.saveOrUpdateSubjectVisitAttr()
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		// 保存数据
		saveOrUpdateSubjectVisitAttr() {
			const data = this.isVisitDialogOpenForm
			// const data = {}
			// this.formList.map(item => {
			// 	data[item.prop] = item.value
			// })
			// data.researchCode = this.researchCode
			// data.subjectCode = this.addVisitOpenObj.item.subjectCode
			// data.subjectVisitCode = this.addVisitOpenObj.item.code
			this.$api.subjectVisitAttr
				.saveOrUpdateSubjectVisitAttr(data)
				.then(res => {
					console.log(res, 'res')
					this.$emit('closeEditoralvisit', false)
				})
		},
		// 取消
		isVisitDialogOpenClose() {
			console.log('取消')
			this.$emit('closeEditoralvisit', false)
		}
	}
}
</script>

@Herry

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态表单验证

问题：我们想在form表单中进行遍历input、select等多种选择，那么我们需要的数据结构就是： formList: [ { value: '', label: '门诊号', prop: 'clinicNo', type: 'input' }, { value: '', label: '住院号', prop: 'hospitalNo', type: 'input' }, {
复制链接

扫一扫