Vue form validation, input box value validation failed

question :

When doing form validation, the input box echoes the value returned by the backend, but when the confirm button is clicked, the validation fails, prompting that the current item cannot be empty.

reason:

Because the backend returns a number type, but its frontend uses a normal input box, so the type does not match. Even if we input a number in the ordinary input box, the printed value will be a string, which means that the ordinary input box cannot output numbers, but the echo is a number again, well, the type does not match, and the verification will naturally fail.

1. To keep the similarity consistent, you can change the normal input box into a digital input box, and ensure that the similarity returned in the background is also a number.
2. You can also continue to use the normal input box, and then convert the number to a string when obtaining the corresponding value in the background.

solve:

v-model plus .numbermodifier

// 只能输入数字
<Input v-model.number="formItem.vehicleAndVesselTax" type="number"  placeholder="安途帮费用"></Input>

// 校验规则
{
    
    'affiliationFee': {
    
     required: true, type:'number', message: '账号不能为空', trigger: 'blur' },