网站设计云匠网,长春网站建设网诚传媒,5年的室内设计师收入,宝安网站建设信科免费一、项目需求
在项目中一个页面中需要实现多个Form表单#xff0c;并在页面提交时需要对多个Form表单进行校验#xff0c;多个表单都校验成功时才能提交。
二、实现效果 三、多个表单验证
注意项#xff1a;多个form表单#xff0c;每个表单上都设置单独的model和ref并在页面提交时需要对多个Form表单进行校验多个表单都校验成功时才能提交。
二、实现效果 三、多个表单验证
注意项多个form表单每个表单上都设置单独的model和ref不能同时使用否则每个表单上的校验提示会失效。
templatediv!-- 表单一区域 --el-form :inlinetrue :modelform1Mode classdemo-form-inline refform1Ref :rulesform1Rulesel-form-item label表单一 propuserel-input v-modelform1Mode.user placeholderform1/el-input/el-form-item/el-form!-- 表单二区域 --el-form :inlinetrue :modelform2Mode classdemo-form-inline refform2Ref :rulesform2Rulesel-form-item label表单二 propuserel-input v-modelform2Mode.user placeholderform2/el-input/el-form-item/el-form!-- 按钮提交区域 --divel-button typeprimary clickonSubmit确定/el-buttonel-button取消/el-button/div/div
/template
3.1、方式一依次对两个表单进行校验
script
export default {data() {return {form1Mode: {user: },form2Mode: {user: },form1Rules: {user: [{ required: true, message: 请输入form1, trigger: blur }]},form2Rules: {user: [{ required: true, message: 请输入form2, trigger: blur }]}}},methods: {//确定按钮async onSubmit() {try {await this.$refs.form1Ref.validate()console.log(表单1校验通过)await this.$refs.form2Ref.validate()console.log(表单2校验通过)//都校验成功之后这里可以发请求this.$message.success(表单校验成功)} catch (error) {console.error(表单校验失败, error)}}}
}
/script
3.2、方式二两个表单同时校验------使用Promise.all
script
export default {data() {return {form1Mode: {user: },form2Mode: {user: },form1Rules: {user: [{ required: true, message: 请输入form1, trigger: blur }]},form2Rules: {user: [{ required: true, message: 请输入form2, trigger: blur }]}}},methods: {//封装验证函数submitForm(formUser) {return new Promise((resolve, reject) {this.$refs[formUser].validate((valid) {if (valid) {resolve()} else {reject(new Error(错误))}})})},//确定按钮onSubmit() {Promise.all([this.submitForm(form1Ref), this.submitForm(form2Ref)]).then(() {//验证成功后在此处发请求this.$message.success(验证通过)}).catch(() {this.$message.error(验证失败)})}}
}
/script
