element複数のフォーム検証の実装
プロジェクトの中で、フォームの検査によく出会います。単一のフォームの検査はelementの公式文書を確認できます。詳しい紹介があります。ここで私は実際のプロジェクトの中で複数のフォームに出会ったことを共有して、同時に検証と私の解決方法を行います。皆さんのメッセージを歓迎します。一緒に関連技術を検討します。よろしくお願いします。
ここでは主にPromiseを使って解決します。
Promise方法について例を挙げて抽象的に理解する：
週末に鍋を食べたいです。Aさんに電話して、鍋料理が全部揃いました。海産物が来たら、少し持ってきてください。それから電話して友達のBさんを探して、私の鍋に来てください。海産物があります。肉が少し少ないです。来る時に持ってきてください。友達のC：ここに来てください。鍋料理は全部できました。お酒がもう少しで来たら、全部で何本ですか？もう一つの鍋の材料が足りません。携帯電話で電話してください。Dさん、仕事に来てください。どのようにいくつかがあります。この電気ストーブはあまりよくないです。何でも用意しました。電気ストーブを持ってきてください。
鍋を食べるということは、いいことになります。
でも、このことは。ずっとうまくいかないです。来られない人もいるでしょう。この鍋が来ないと食べられなくなります。
実際には、複数のフォームの検証は、このフォームとほぼ同じですが、すべてのフォームを確認してください。もしみんなが合格したら、嬉しいです。もし一つの検証が失敗したら、申し訳ございません。ユーザーに教えて、正しく記入してください。
Promiseを通じて、各フォームに対して問い合わせ検査を行います。結果に関わらず、先にPromise.allの中に入って、すべてのフォームの問い合わせが終わるのを待っています。逆に、catchで失敗応答を実行すればOKです。
ここでは主にPromiseを使って解決します。
Promise方法について例を挙げて抽象的に理解する：
週末に鍋を食べたいです。Aさんに電話して、鍋料理が全部揃いました。海産物が来たら、少し持ってきてください。それから電話して友達のBさんを探して、私の鍋に来てください。海産物があります。肉が少し少ないです。来る時に持ってきてください。友達のC：ここに来てください。鍋料理は全部できました。お酒がもう少しで来たら、全部で何本ですか？もう一つの鍋の材料が足りません。携帯電話で電話してください。Dさん、仕事に来てください。どのようにいくつかがあります。この電気ストーブはあまりよくないです。何でも用意しました。電気ストーブを持ってきてください。
鍋を食べるということは、いいことになります。
でも、このことは。ずっとうまくいかないです。来られない人もいるでしょう。この鍋が来ないと食べられなくなります。
実際には、複数のフォームの検証は、このフォームとほぼ同じですが、すべてのフォームを確認してください。もしみんなが合格したら、嬉しいです。もし一つの検証が失敗したら、申し訳ございません。ユーザーに教えて、正しく記入してください。
Promiseを通じて、各フォームに対して問い合わせ検査を行います。結果に関わらず、先にPromise.allの中に入って、すべてのフォームの問い合わせが終わるのを待っています。逆に、catchで失敗応答を実行すればOKです。
const formName = ['tableForm1', 'tableForm2', 'tableForm3']
const validates = (item) => {
return new Promise((resolve, reject) => {
if (!this.$refs[item]) {
resolve()
return false
}
this.$refs[item].validate((valid) => {
if (valid) {
resolve()
} else {
reject(new Error(' '))
}
})
})
}
Promise.all(formName.map(item => validates(item))).then(() => {
console.log(' ')
}).catch(() => {
console.log(' ')
})
}
}
<div class="home">
<el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" >
<el-form-item label=" " prop="price">
<el-input v-model.number="tableForm1.price" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-form :model="tableForm2" ref="tableForm2" :rules="rules2" label-width="100px" >
<el-form-item label=" " prop="age">
<el-input v-model.number="tableForm2.age" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-form :model="tableForm3" ref="tableForm3" :rules="rules3" label-width="100px" >
<el-form-item label=" " prop="name">
<el-input v-model.number="tableForm3.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="resetForm"> </el-button>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
tableForm1: {
price: ''
},
tableForm2: {
age: ''
},
tableForm3: {
name: ''
},
rules1: {
price: [{ required: true, message: ' ', trigger: 'blur' }]
},
rules2: {
age: [{ required: true, message: ' ', trigger: 'blur' }]
},
rules3: {
name: [{ required: true, message: ' ', trigger: 'blur' }]
}
}
},
methods: {
resetForm () {
this.$refs.tableForm1.resetFields()
this.$refs.tableForm2.resetFields()
this.$refs.tableForm3.resetFields()
},
submitForm () {
const formName = ['tableForm1', 'tableForm2', 'tableForm3']
const validates = (item) => {
return new Promise((resolve, reject) => {
if (!this.$refs[item]) {
resolve()
return false
}
this.$refs[item].validate((valid) => {
if (valid) {
resolve()
} else {
reject(new Error(' '))
}
})
})
}
Promise.all(formName.map(item => validates(item))).then(() => {
console.log(' ')
}).catch(() => {
console.log(' ')
})
}
}
}
</script>