Vue iview form表单验证失效

最新推荐文章于 2024-06-28 11:10:58 发布

Э时间行者于我

最新推荐文章于 2024-06-28 11:10:58 发布

阅读量3.1k

点赞数 2

分类专栏： Vue 文章标签： vue.js view design

本文链接：https://blog.csdn.net/qq_45094682/article/details/126946323

版权

Vue 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

Vue+iview form表单验证失效

问题描述

当Form表单添加rules格式校验时，我们一般会采取默认iview form表单校验，这导致一些数字类型(number)的数据验证失效。

后端存储的数据类型都是number类型，不要以前端传什么存什么为主哦

1.方法一，这时你应当给确定的字段添加数据类型校验，如

<Form ref="formValidate"  :model="form1" :rules="ruleValidate">
	<FormItem label="90分位时效:" prop="percentileAging" :label-width="formNameWidth">
      <!-- <Input  v-model.trim="form1.percentileAging"  clearable placeholder="请输入时效考核标准"></Input> -->
      <!-- 不要用input输入框了，改为数字输入框，这样可以确保你输入的类型为数字类型 -->
      <InputNumber :min="1" v-model.trim="form1.percentileAging"></InputNumber>
    </FormItem>
</Form>

js

以percentileAging字段为例,值为数字类型

注意：`type: 'number'`类型必须添加，否则你数据校验时表单校验不通过

ruleValidate: {
  percentileAging: [{ required: true,type: 'number', message: '请输入90分位时效', trigger: 'blur' }]
},

2.方法二，不校验值类型是什么，全部默认当字符串类型处理，不设置数据类型校验

<Form ref="formValidate"  :model="form1" :rules="ruleValidate">
	<FormItem label="90分位时效:" prop="percentileAging" :label-width="formNameWidth">
      <Input  v-model.trim="form1.percentileAging"  clearable placeholder="请输入时效考核标准"></Input> 
    </FormItem>
</Form>

注意这里没有type类型校验，用默认值

ruleValidate: {
  percentileAging: [{ required: true, message: '请输入90分位时效', trigger: 'blur' }]
},

在点击编辑修改操作时直接赋值

this.openModal('edit', row)


methods: {
	// 新增/编辑
   openModal(status, row) {
     this.form1 = this.$options.data().form1 // 初始化表单
     this.modalStatus = status
     if (status === 'add') {
       this.$refs['formValidate'].resetFields()
       this.modal1 = true
     } else if (status === 'edit') { // 修改渠道时效维护
       // 渲染编辑的表单数据
       let tempForm = this.$rowEditFormNumToStr(this.form1, row)
       this.form1 = tempForm
       setTimeout(() => {
         this.modal1 = true
       }, 100)
     }
   },
},

在vue的原型上添加一个公共方法`$rowEditFormNumToStr`

/**
 * row数据编辑 form => row 填 数字类型变字符串类型，表单验证不生效问题
 * @param {object} form
 * @param {object} row
 * @returns {object}
 */
  Vue.prototype.$rowEditFormNumToStr = (form, row) => {
    Object.keys(form).forEach(key => {
      form[key] = typeof row[key] === 'number' && isFinite(row[key]) ? `${row[key]}` : row[key]
    })
    return form
  }