el-form のフォームフィールドの値をカスタム検証するには、カスタム検証関数を使用できます。これを行うには、el-form-item に prop 属性と rules 属性を設定します。
以下に例を示します。
<el-form ref="form" :model="formData" label-width="120px">
<el-form-item label="名称" prop="name" :rules="[{ validator: validateName }]">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
上の例では、el-form-item に prop 属性を追加しましたが、prop 属性の値は、formData オブジェクトのフィールド名に対応している必要があります。同時に、カスタム検証関数 validateName が、rules 属性を介して el-form-item に指定されます。
次に、Vue コンポーネントで validateName 検証関数を定義します。
export default {
data() {
return {
formData: {
name: ''
}
};
},
methods: {
validateName(rule, value, callback) {
// 进行自定义校验逻辑
if (value === 'admin') {
callback(new Error('名称不能为 admin'));
} else {
callback();
}
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 校验通过，进行表单提交操作
console.log('表单校验通过');
} else {
// 校验不通过，进行错误处理
console.log('表单校验未通过');
}
});
}
}
};
上記のコードでは、入力された名前は validateName 関数を通じてカスタム検証されます。名前が「admin」の場合は、コールバック関数を呼び出してエラー情報を渡します。それ以外の場合は、パラメータを渡さずにコールバック関数を呼び出します。同時に、この機能ではデータ内のデータを判断の参考にすることもできます。
最後に、submitForm メソッドで el-form の validate メソッドを呼び出して、フォーム検証をトリガーします。コールバック関数では、検証結果に基づいて対応する処理を実行します。
上記の手順により、el-form のフォームフィールドの値をカスタマイズできます。