vueにおけるいくつかのタイプのバリデーション

インライン校正

動的に生成されたフォームは一行ずつチェックする必要があるので、インラインチェックを使う方が理にかなっています。

メソッド1

el-form-itemはel-tableの下に入れ子にすることができますが、双方向のバインディングは、Vモデルのバインディングを介して、スロットを介してのみ取得することができ、ここに注意を払う必要があるのはpropsを追加する必要があるということです、ランダムに値を与えるトリガすることができ、追加しないとたまにトリガされなくなります。

<el-table-column prop="name" label="xxx align="center">
 <template slot-scope="scope">
 <el-form-item
 prop="x"
 :rules="[
 { validator: function(rule, value, callback) {
 const { name } = form.sentenceList[scope.$index]
 if (name) {
 return callback()
 }
 callback(throwError())
 }, message: ' xxx, trigger: 'blur' },
 ]"
 >
 <el-input v-model="scope.row.name" placeholder="xxx></el-input>
 </el-form-item>
 </template>
 
</el-table-column>

メソッド2

<div
 class="form-item-group"
 v-for="(item,index) in addDataForm.disActReviewTransfers"
 :key="index"
 >
 <el-form-item
 label="xxx"
 :prop="'disActReviewTransfers.' + index + '.reflectedUser'"
 :rules="[{ required: true, message: ' xxx, trigger: 'blur' }]"
 >
 <el-input
 v-model="item.reflectedUser"
 maxlength="32"
 :ref="`reflectedUser-${index}`"
 ></el-input>
 </el-form-item>
</div>

メソッド3

<el-form-item
 label="ID番号:"
 :prop="'disActReviewTransfers.' + index + '.idCard'"
 :rules="[{ required: true, message: 'ID番号を記入する', validator:checkIdCard}]"
 >

このようなインラインのカスタムチェックサム関数は、methods部分に記述する必要があります。

checkIdCard(rule, value, cb) {
 if (!value) {
 cb(new Error('ID番号を記入する'))
 } else {
 const regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
 if (regIdCard.test(value)) {
 return cb()
 }
 cb(new Error('法的ID番号を記入する'))
 }
 cb()
 }

カスタム校正

data() {
 var reviewReportValid = (rule, value, cb) => {
 this.addDataForm.disActReviewTransfers.forEach((i, index) => {
 if (i.reviewReport === '') {
 cb(rule)
 }
 })
 cb()
 }
 return{}
}

reviewReportValidはmethods部分ではなく、上記の位置に記述する必要があることに注意してください。

addDataFormRules:{
 reviewReport: [
 {
 required: true,
 validator: reviewReportValid,
 trigger: 'blur',
 message: ' ---
 },
 ],
}