Vue iview form表单验证失效

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">
      
      
      <InputNumber :min="1" v-model.trim="form1.percentileAging">InputNumber>
    FormItem>
Form>
1
2
3
4
5
6
7

js

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

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

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

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>
1
2
3
4
5

js

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

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

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

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)
     }
   },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在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
  }
1
2
3
4
5
6
7
8
9
10
11
12

最后你的问题就很好的解决了，有问题评论区见