1. 問題の説明
動的切り替えルールの検証によって発生するいくつかの問題を整理すると、次のようになります。
1. 動的バインディングルールの検証
ここでは、無線を動的に切り替えて入力ボックスを確認する必要があります。インターフェイスは次のとおりです。
ネットで調べて、最初に検証ルールを動的に追加する方法で解決しました。
<el-form-item label="授权密匙(Key)" v-if="form.value.platformType === 2" prop="value.hundredApiKey" :rules="form.value.platformType === 2 ? rules.hundredApiKey:[{ required: false}]">
<el-col :span="10">
<el-input v-model="form.value.hundredApiKey" placeholder="请输入授权密匙(Key)" />
</el-col>
</el-form-item>
if を使用して、platformType が 2 に等しいかどうかを判断し、ルール、rules.hundredApiKey および required: false を追加します。後でインターネットで何が言われているかを確認してください。v-if を使用して直接動的効果を実現できます。後で :rules を使用して追加すると、表示されません。このルールはデフォルトでは無効になっています。
// 表单校验
rules: {
hundredApiKey: [{
required: true, message: "快递100 API Key不能为空", trigger: ['blur','change']}]
}
2. 拘束ルールと形式の問題
ここで他にも問題が発生します。つまり、入力には明らかに値がありますが、入力値を空にすることはできないというプロンプトが表示されるだけであり、次の手順に従って削除できます。
:model="ruleForm" 绑定的ruleForm值是否挂载成功并且操作的是否是这个表单。
:rules="rules" 校验的规则格式绑定的rules是否定义并且格式正确为对象数组。
el-form-item中的prop="name"是否和rules中的name: [ {
required: true, message: '请输入活动名称', trigger: 'blur' }, ], 的名称一致，两个name是相同的，element的校验就是根据这个prop找对应的输入框的。
<el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"确保对象ruleForm中有name这个属性！
知らせ：
以下に示すように、ルールとフォーム バインディングのデータ レベルが同じ場合
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="选项：" prop="name">
<el-select v-model="form.name">
<el-option label="测试一" value="1"></el-option>
<el-option label="测试二" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
form:{
name:'',
},
rules:{
name:[{
required: true, message: '请选择', trigger: 'blur'}]
}
上記のバインディングは問題ありません。私は次の形式を使用します
form:{
a:{
name:'',
}
},
a オブジェクトに name 属性があります。上記の方法でバインドしても機能しません。正しい方法は次のとおりです。解決策は 2 つあります:
解決策 1: ルールを定義してバインドするとき、ルール構造はデータ構造と一致します。
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="选项：" prop="a.name">
<el-select v-model="form.a.name">
<el-option label="测试一" value="1"></el-option>
<el-option label="测试二" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
form:{
a:{
name:'',
}
},
rules:{
'a.name':[{
required: true, message: '请选择', trigger: 'blur'}]
}
解決策 2: フォーム バインドされたデータ オブジェクトをオブジェクトのサブオブジェクトになるように変更します。
<el-form :model="form.a" :rules="rules" ref="form">
<el-form-item label="选项：" prop="name">
<el-select v-model="form.a.name">
<el-option label="测试一" value="1"></el-option>
<el-option label="测试二" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
form:{
a:{
name:'',
}
},
rules:{
name:[{
required: true, message: '请选择', trigger: 'blur'}]
}
3. v-if を使用したルール検証は無効です
上記のフォームに複数のコンポーネントがある場合、1 つだけが有効で、他のすべての検証ルールは無効になります。
<el-form-item label="选项：" prop="name">
この問題は長い間私を悩ませてきました。後でデバッグ中にこのルールを見つけ、インターネットで答えを見つけました。必要なのは key 属性を追加するだけです。
<el-form-item label="选项：" prop="name" key="name">