複雑なオブジェクトのフォーム検証のタイトルプロジェクト開発VUE +要素-UI型の配列
-
需要シナリオ
調達システム上のモジュールを持つプロジェクトの最近の開発では、調達は、台帳情報フォームを購入を避けるために行うことができない、それがループを通って、オブジェクトの最も複雑な配列を必要とするような情報や複雑さの調達は、動的に追加されます検証を追加。まず、この検証レンダリングを絵1-1を追加します。
ここではいくつかのほとんど疑いはあなたに簡単な答えああを与えることができます。1つの疑問：ルールが結合され、前のデータに基づいている成分の配列は、すでに行われていたので、たとえば、なぜ、仕様を確認していません。だから、食材は仕様データの有無かどうかを確認します確認してください。2不思議：なぜ食べ物を禁止するルールがあり、異なる人々は、このようなAと呼ばれる白菜は、Bは白菜と呼ばれる、Nの可能性はキャベツとなり埋めるため、プロジェクトの要件である、間違って顧客情報を防止して、入力し、キャベツと呼ばれるCは...のような、それはデータの裏を助長されていませんが要約されています。そのため、ページの食材を開くには、次の入力選択ボタンにボックスを追加するために、成分は、データを選択するために使用します。友人として、あなたは私には専用ことができ、他の質問があります。 -
複雑なデータを確認する必要がある、オブジェクト
、次のように今、上記のフォームでのライブデータに私たちをみましょう：
dailyUseRecordForm:////新增、修改日消耗品登记信息中的选项信息
{ date:'',//新增和修改日消耗品的登记日期
gysName:'',//新增和修改日消耗品的供应商信息
gysId:'',//新增和修改台账信息供应商id
details:[
{
foodName:'',//新增和修改日消耗品的名称
spec:'',//新增和修改日消耗品的规格
num:'',//新增和修改日消耗品的数量
price:'',//新增和修改日消耗品的单价
foodId:'',//新增和修改台账信息食物id
id:''//该对象的id
}
]
},
定义的表单数据类型如上所示，需要说明一下，初始的时候食材数据数组（dailyUseRecordForm.details）只有一条空数据，点击小“+”号按钮，或者下面的批量添加按钮都能往里面添加新的对象数据，下面是点击加号往里面添加一条数据后的样子：
dailyUseRecordForm:////新增、修改日消耗品登记信息中的选项信息
{ date:'',//新增和修改日消耗品的登记日期
gysName:'',//新增和修改日消耗品的供应商信息
gysId:'',//新增和修改台账信息供应商id
details:[
{
foodName:'',//新增和修改日消耗品的名称
spec:'',//新增和修改日消耗品的规格
num:'',//新增和修改日消耗品的数量
price:'',//新增和修改日消耗品的单价
foodId:'',//新增和修改台账信息食物id
id:''//该对象的id
},
{
foodName:'',
spec:'',
num:'',
price:'',
foodId:'',
id:''
}
]
},
- ページのフォーム検証遠位部分に
（1）フォーム検証ルールを定義します。
dailyUseRecordRules:{//台账信息表单验证规则
gysName:[
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
],
date: [
{ required: true, message: '请选择日期', trigger: 'blur' },
// { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
foodName:[//食材名称
{ required: true, message: '请选择食材', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' },
],
num:[
{ required: true, message: '请输入数量', trigger: 'blur' },
{
required: false,
pattern: /(^[1-9]\d*$)/,
message: '数量格式有误',
trigger: 'blur'
}
],
price:[
{ required: true, message: '请输入价格', trigger: 'blur' },
{
required: false,
pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
message: '价格格式有误',
trigger: 'blur'
}
]
}
これらは、フォームの検証規則は、データアレイで定義され、使用される必要があります。
（2）フォーム検証
、今日のトピックは複雑なオブジェクトであるためトラバーサル検証、我々はデータのみが「dailyUseRecordForm.details」内の上記オブジェクトの配列である、複雑なデータ構造を検証方法を分析して。各要素に検証を追加するために、配列をトラバースする方法。
<div v-for="(item,index) in dailyUseRecordForm.details :key="index">
<el-form-item label="name" :prop="`details[${index}].foodName`" :rules="dailyUseRecordRules.foodName">
<el-input v-model="item.foodName"></el-input>
</el-form-item>
<el-form-item label="name" :prop="`details[${index}].num`" :rules="dailyUseRecordRules.num">
<el-input v-model="item.num"></el-input>
</el-form-item>
<el-form-item label="name" :prop="`details[${index}].price`" :rules="dailyUseRecordRules.price">
<el-input v-model="item.price"></el-input>
</el-form-item>
</div>
以上的几行代码便是解决表单验证的核心所在，因为自己的页面中有按钮，占位符等不利于观察的因素，所以先给出一个思路。下面是自己实际中的情况，其实这个没有看到必要，只是为了增加一点实际的项目代入感，我还是粘上，想看的人看，不想看的人忽略。
<el-form-item v-for='(item,index) in dailyUseRecordForm.details' :label=" '食材'+(index+1) " :key="index">
<el-form-item label='名称' :prop="`details[${index}].foodName`" :rules='dailyUseRecordRules.foodName'>
<el-input v-model="item.foodName" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.name :disabled="true"> </el-input>
<el-button icon="el-icon-search" @click='searchDialogOpen(index)'></el-button>
</el-form-item>
<el-form-item label='规格'>
<el-input v-model="item.spec :placeholder=dailyUseRecordMessage.spec :disabled="true"></el-input >
</el-form-item>
<el-form-item label='数量' :prop="`details[${index}].num`" :rules='dailyUseRecordRules.num'>
<el-input v-model="item.num" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.num clearable></el-input>
</el-form-item>
<el-form-item label='单价' :prop="`details[${index}].price`" :rules='dailyUseRecordRules.price'>
<el-input v-model="item.price" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.price clearable></el-input>
<span>元</span><span v-show="item.spec === '' ? false : true" >/{{item.spec}}</span>
</el-form-item>
<el-form-item style="display:inline-block;">
<el-button icon='el-icon-delete' @click="delFoodDetail(index)"></el-button>
</el-form-item>
<el-form-item style="display:inline-block;" v-if="index === Number(dailyUseRecordForm.details.length)-1">
<el-button icon='el-icon-plus' @click="addFoodDetail"></el-button>
</el-form-item>
</el-form-item>
- 概要セクション
は、データオブジェクトは複数の属性を持って横断する必要がある場合は、動的フォーム検証は、配列オブジェクトの場合のために与えられた公式のラインは、検証する唯一のプロパティの必要性を持っているあなたは、私が変更上記と同様の操作を行う必要があり、認証が必要です。、のは、議論させることができ、私のプライベートの友人についての質問があります。
