まず、フォームコンポーネントを使用する必要がある Vue ファイルを導入します
import type { FormInstance } from 'element-plus'
この図で属性を説明します。最初の項目 ref="ruleFormRef" です。ruleFormRef は、各属性を定義して使用するために必要な条件です。 const rulesFormRef = ref<FormInstance>() FormInstance、つまり FormInstance を導入した後は各属性を指定するために使用されるインターフェイスです。2 番目: model="ruleForm" は定義する検証ルール オブジェクトのコレクションです。:rules="rules" は検証ルールの実装です (必須かどうか、イベントのトリガーなどを含みます)。 , 変更とぼかしを含め、label-width="120px" はラベルの幅であり、el-form の下のラベルは el-form の幅を自動的に継承します。これは、ラベルをカスタマイズしてその幅を設定するのと同じです。 120px、class はカスタム クラス名です。スタイルはカスタマイズできます。size 属性は、デフォルトの大小 3 つの属性を含む入力ボックスのサイズです。status-icon は入力が正しいかどうかを確認するためのもので、対応する入力ボックスの最後にアイコンアイコンプロンプトが表示されます。デフォルトは false です。
label-position ラベルの配置方法には、左、右、上という 3 つの属性があります。
以下は el-form-item 属性です。ruleForm は検証ルールのコレクションであると上で述べましたが、ユーザー入力がルールに準拠しているかどうかを確認するにはどうすればよいでしょうか? 2 つの属性を設定する必要があります。1 つ目は、el-form-item タグに prop 属性を設定することです。たとえば、ここでは、ruleForm オブジェクトに名前検証ルールがあります。
2 番目のステップは、el-input タグに v-model='ruleForm.name' を設定することです。
これに似たもの
これで、ルールがどこで使用されるかがわかりました。以下はカスタムルールです。
1 つ目は、ruleForm を定義することです。これは、リアクティブ オブジェクトであり、すべてのルールのオブジェクト コレクションです。
具体的なルールは以下の通り
まず、検証はフォーム全体の内容を検証し、続いて特定のルールを実装します。トリガーは、上で説明したトリガーされたイベントです。
3 つのパラメータを受け取ります。rule は次のルール、value は入力内容、callback はコールバック関数、
入力を検証するための独自の正規表現を作成できます。
注: callback() では、このコールバック パラメータは最後に記述する必要があります。書かれていない場合は、入力した内容がルールに準拠している場合でも、常に検証されます。