设置ant-design vue表单a-input输入类型为数字

新增/更新表单时,要求表单输入框类型数字类型,而后端实体类该属性为字符类型,以下操作可以帮助你实现

在v-model后面添加类型限制,即number


    
       
    

在表单校验中添加 type: 'number'

rules: {
    age: [
       { type: 'number', required: true, message: '年龄必须为数字类型', trigger: 'change' }
    ],
}

这时,新增时表单的数据类型校验是没问题了,但是更新时输入框内的内容明明是数字,但却一直提示需要输入数字类型的数据,原因,后端传过来的数据时字符类型,正如前面所说,后端设置的属性是字符类型,所以表单中接收的数据是字符类型,只需要将更新时上传的表单数据类型进行强制转换为数字类型Number即可,到这就可以实现需求了

 this.form.age= Number(this.form.age)

提交表单时,添加表单校验

// 取消
close () {
  this.reset()
  this.$refs.ruleForm.clearValidate()
  this.confirmLoading = false
  this.visible = false
},
// 确认
confirm () {
  this.confirmLoading = true
  this.$refs.ruleForm.validate(valid => {
  if (valid) {
     this.$emit('handle-success', this.form)
   } else {
      this.confirmLoading = false
     }
   })
 },

你可能感兴趣的:(前端开发,vue.js,javascript,前端)