1. 対象となる効果
elementUI をフォーム検証に使用する場合、検証できるのは入力ボックス、ドロップダウン選択リストなどだけですが、ファイルのアップロードは検証できないため、手動で行う必要があります。対象となる効果は以下の通りです。
全体として、次のような効果があります: (1) チェックボックスをクリックせず、送信をクリックすると検証に合格します。(2) チェックボックスをクリックし、ファイルをアップロードしないと検証は失敗します。(3)チェックボックスをオンにしてファイルをアップロードすると、プロンプトが消え、検証に合格します。 (4) チェックボックスをクリックして必要なスタイル表示を表示します。チェックボックスをクリックしない場合、赤い点はプロンプトされません。
2. 記録の捕捉
1. フォーム項目にプロパティを入力する必要があり、データにもルールを入力する必要があります。プロパティの値は、ルールに対応するルールと一致しています。そうでない場合、検証効果は得られません。達成される。
2. ルールをカスタマイズする際、コールバックを記述しないと検証が有効になりません
3. ここでは動的設定の検証が使用されます。多くの人の最初の反応は、props を動的に設定することです。つまり、次のように記述します。
:prop="条件? '独自定義ルールに基づくルール' ? ' '"
3.1 このような prop は有効ではなく、次のように記述する必要があります: prop="Condition? 'Rules under self-defined rules'? 'empty'"
3.1.1 この書き方にはまだ問題があります。将来、ルールの下で定義されたルールが空になった場合はどうなるでしょうか。そのため、ベスト プラクティスは、プロパティを動的に設定せず、プロパティを最後まで書き込み、ルール バリデータで検証することです。 。
4. el-upload の action="https://jsonplaceholder.typicode.com/posts/" は、ファイルのアップロード時にクロスドメイン エラーを報告し、場合によっては 503 エラーが報告されます。クロスドメインの問題は Google Chrome プラグインを通じて解決できます
CORS を許可: Access-Control-Allow-Origin0.1.5 が解決されました。実際、実際のプロジェクトでは、アクションの後にバックエンドのアドレスが続くため、これら 2 つの問題は自然に解決されます。
5. 赤いドットの生成は、クラス名を動的にバインドすることによって実現されます。
:class="条件?'は必須です' ：' ' "
6. this.$refs.refName.clearValidate(prop value) を使用して 検証プロンプトをクリアします
3. コードの実装
<template>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="活动名称:" :class="showFlag ? 'is-required' : ''" prop="file">
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-remove="handleRemove"
:on-success="uploadSuccess">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="必上传文件:">
<input type="checkbox" v-model="showFlag" @change="handleCheckBoxChange" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'App',
data() {
// 文件上传校验规则
const fileMustUpload = (rule, value, callback) => {
if (this.showFlag && this.file == null) {
// 未上传文件
callback("请上传文件");
}
callback();
}
return {
showFlag: false, //判断红点是否显示，与复选框的值绑定在一起
ruleForm: {
file: null //接受文件值
},
rules: {
file: [
//自定义校验器
{ validator: fileMustUpload, trigger: 'change' }
]
}
}
},
methods: {
// 文件移除事件监听
handleRemove() {
this.file = null;
},
// 提交
onSubmit() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('上传成功!');
}
});
},
// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
uploadSuccess(file) {
this.clearFileUploadValidate();
this.file = file
},
// 清空文件上传校验
clearFileUploadValidate() {
this.$refs.ruleForm.clearValidate('file');
},
// 监听复选框值的变化
handleCheckBoxChange(event) {
// 复选框的值绑定给showFlag，并用它来控制红点必填样式
this.showFlag = event.target.checked;
if (!this.showFlag) {
this.clearFileUploadValidate();
}
}
},
}
</script>
<style>
.el-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#app {
height: 100%;
}
</style>