vueがElementコンポーネントを使用する場合のv-forループでのフォーム項目の検証方法について

この記事では、Vue が Element コンポーネントを使用する場合の v-for ループでのフォーム項目の検証方法を主に紹介します。内容が非常に優れているので、参考として共有します。

タイトルの説明は、vue、要素、フォーム検証、v-for ループなど、少し複雑に見えますか?ちょっと汚くないですか？しかし、開発中にこの問題に遭遇した学生なら、私の言いたいことは一目で理解できると思います。

まず、Element コンポーネントにはフォーム検証メソッドの完全なセットがあり、公式ドキュメントにも非常に明確に記載されています。通常は、必要なフォーム項目の props を設定します。このメソッドはフォーム項目を検証します。

しかし、ここで v-for を通じて動的に生成されたフォーム項目がある場合、検証をどのように設定すればよいでしょうか?この公式ドキュメントには明確な説明がありませんが、解決策を探して実際に検証した結果、以下のように解決策をまとめました。

1 つ目は、フォーム項目が検証される前にコードをループすることです:

<template>
 <p class="content-body">
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
   <el-row :gutter="10">
    <el-col :span="12" :offset="0">
     <el-form-item label="套餐名称：" prop="activityName" id="activityName">
      <el-input v-model="form.activityName"></el-input>
     </el-form-item>
    </el-col>
   </el-row>
   <el-row :gutter="10">
    <el-col :span="12">
     <el-form-item label="状态：">
      <el-radio v-model="form.status" label="1">上线</el-radio>
      <el-radio v-model="form.status" label="0">下线</el-radio>
     </el-form-item>
    </el-col>
   </el-row>
   <el-row :gutter="10">
    <el-col :span="2" style="width:120px;">
     <p class="sub-title">梯度设置：</p>
    </el-col>
    <el-col :span="20">
      <el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index">
       <el-col :span="6">
        <el-form-item label="商品数量:">
         <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input>
        </el-form-item>
       </el-col>
       <el-col :span="6">
        <el-form-item label="优惠价格:">
          <el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input>
        </el-form-item>
       </el-col>
       <el-col :span="4">
        <i class="el-icon-remove-outline" @click="deleteLadder(index)"></i>  
        <i class="el-icon-circle-plus-outline" @click="addLadder" v-if="index==0"></i>
       </el-col>
      </el-row>
    </el-col>
   </el-row>
   <el-form-item size="medium" class="p-submit">
    <el-button @click="resetForm(&#39;form&#39;)">取消</el-button>
    <el-button type="primary" @click="submitForm(&#39;form&#39;)">提交</el-button>
   </el-form-item>
  </el-form>
 </p>
</template>
<script>
/* eslint-disable */
export default {
 data() {
  return {
   form: {
    activityName: &#39;&#39;,
    status: &#39;1&#39;,
    productGroup: [{num:"",price:""}]
   },
   rules: {
    activityName: [
     { required: true, message: &#39;请输入套餐名称&#39;, trigger: &#39;blur&#39; }
    ]
   }
  }
 },
 methods: {
  deleteLadder(index)
  {
   if(this.form.productGroup.length>1){
    this.form.productGroup.splice(index,1);
   }
  },
  addLadder()
  {
   this.form.productGroup.push({num:"",price:""});
  },
  submitForm(formName)
  {
   console.log("activityName...",this.form.activityName);
   this.$refs[formName].validate((valid,obj) => {
    if (valid) {
     this.submitFormAction();
    } else {
     this.$message.error("验证不通过");
    }
   });
  },
  submitFormAction()
  {
   this.$message.success("提交成功");
  },
  resetForm(formName)
  {
   this.$refs[formName].resetFields();
   this.form.productGroup = [{num:"",price:""}];
  }
 }
}

</script>
<style>
.el-form-item {
 margin-bottom: 20px;
}
</style>

1 つ目は、通常の追加ルールと同じルール ルールを追加することです:

productGroupRules: {
 productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],
 productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]
}

Thenフォーム項目と製品に検証を追加します。 数量を例に挙げます。

<el-form-item label="商品数量:" :prop="&#39;productGroup.&#39;+index+&#39;.num&#39;" :rules="productGroupRules.productGroupNum">
 <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input>
</el-form-item>

ここで、フォーム項目ごとに :rules を追加する必要があることに注意してください。複数のフォーム項目がある場合は、次を使用します。それらを区別するための形式 productGroupRules.productGroupNum は、上記の productGroupRules の内容に対応します。 :rules是每个表单项都要添加，有多个的话用productGroupRules.productGroupNum这样的形式区分，对应上面productGroupRules里的内容。

另外主要就是:prop了，注意正常验证表单项是prop，而这里是:prop。
:prop="'productGroup.'+index+'.num'"

もう 1 つの主要なものは :prop です。通常の検証フォーム項目は prop ですが、ここでは :prop であることに注意してください。

:prop="'productGroup.'+index+'.num'" はスプライシングの形式になっており、前部は v-for でバインドされた配列、中央は配列のインデックスインデックス、最後はフォーム項目のバインディングで、v-model の名前をドットで結びます。これら 3 つはすべて正しいことが保証されていなければなりません。たとえ 1 つが間違っていたとしても、それを検証することはできません。

もう 1 つ注意すべき点は、v-for でバインドされた配列もフォーム オブジェクト内でバインドする必要があることです。

form: {
 activityName: '',
 status: '1',
 productGroup: [{num:"",price:""}]
}
如果是：

form: {
 activityName: '',
 status: '1'
},
productGroup: [{num:"",price:""}]

これも確認する必要があります。

上記は、vue が Element コンポーネントを使用する場合の v-for ループでのフォーム項目検証の解決策です。この問題に遭遇した学生の助けになれば幸いです。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:
vueのトランジションを使用してスライドトランジションを完了する方法

vueとvue-validatorフォーム検証機能の実装について

🎜🎜

以上がvueがElementコンポーネントを使用する場合のv-forループでのフォーム項目の検証方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。