要素内の vue フォーム検証に関連する問題

この記事では主にフォーム検証でvueと組み合わせた要素の解決策を紹介しますが、値がある場合はエラーが表示されますので、必要な友達は参照してください

バインドされた値はルールで指定された値と同じである必要があります。 ------ -

ステップ 1:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

ルール ref を追加

パート 2:

<el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>

prop を追加

パート 3:

rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
}

ここで required を追加した場合、prop を追加する必要はありません他の詳細な検証については、ドキュメントを参照してください

パート 4: クリックしてフォームを送信します

(ここは覚えておくべき場所です，<el-button type="primary" @click="submitForm(&#39;ruleForm&#39;)">提交表单</el-button>これは引用符で囲む必要がありますので、完了してください

submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {

ここに内容があります)検証が成功したら実行してください

} else {
console.log('error submit!!');
return false;
}
});
},

上記は皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです

関連記事:

jqueryで指定したインデックス値を取得する方法

MUIでサイドスライドメニューを実装する方法

muiフレームワークのオフ-キャンバスサイドがパーツを超えてスライドする問題

vue2.0でbetter-scrollを使用してモバイルスライドを実現する方法

Vue で cli+mui を使用して領域スクロールの問題について

Vue のオンライン有料コース (詳細なチュートリアル)

以上が要素内の vue フォーム検証に関連する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。