Vue フォームの検証、入力ボックスの値の検証に失敗しました

質問 :

フォーム検証を実行すると、入力ボックスはバックエンドによって返された値をエコーし​​ますが、確認ボタンをクリックすると検証は失敗し、現在の項目を空にすることはできないというメッセージが表示されます。

理由:

バックエンドは数値型を返しますが、フロントエンドは通常の入力ボックスを使用するため、型が一致しません。普通の入力ボックスに数値を入力しても、出力される値は文字列になるので、通常の入力ボックスでは数値を出力できないのですが、エコーはまた数値で、まあ、型が一致しませんので、当然検証は失敗します。

  1. 類似性の一貫性を保つために、通常の入力ボックスをデジタル入力ボックスに変更し、バックグラウンドで返される類似性も数値になるようにすることができます。
  2. 通常の入力ボックスを引き続き使用し、バックグラウンドで対応する値を取得するときに数値を文字列に変換することもできます。

解決:

v-model プラス.number修飾子

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

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

おすすめ

転載: blog.csdn.net/qq_34082921/article/details/131541814