Vue iview form表单验证失效
当Form表单添加rules格式校验时,我们一般会采取默认iview form表单校验,这导致一些数字类型(number)的数据验证失效
·
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>
js
注意这里没有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
}
最后你的问题就很好的解决了,有问题评论区见
更多推荐
已为社区贡献1条内容
所有评论(0)