最近在用vue做网站开发时,在用户需求页面有两个el-form表单,在做表单验证时面临是分别做验证还是统一做验证的选择,分别验证比较简单,但不利于页面运用,于是就选择了统一验证,具体方法如下:
首先是在 el-form 表单中添加 ref 属性来获取表单组件对象:
<template> <div> <el-form ref="form1" :rules="rules1"> <!-- 表单内容 --> </el-form> <el-form ref="form2" :rules="rules2"> <!-- 表单内容 --> </el-form> <el-button @click="submit">提交</el-button> </div> </template>
第一个方法:在上述代码中,我们给每个 el-form 表单添加了 ref 属性,分别为 form1 和 form2,在 submit 方法中,分别对两个表单使用 validate 方法进行表单校验:
export default { data() { return { form1: {}, form2: {}, rules1: {}, rules2: {} } }, methods: { submit() { const form1Valid = this.$refs.form1.validate() const form2Valid = this.$refs.form2.validate() if (form1Valid && form2Valid) { // 统一提交表单 } } } }
第二个方法:在上述代码中,我们给每个 el-form 表单添加了 ref 属性,在 submit 方法中,遍历 formRefs 表单数组,依次对每个表单进行校验:
export default { data() { return { // 数组用来存储所有表单的 ref 值 formRefs: [ 'form1', 'form2' ], form1: {}, form2: {}, rules1: {}, rules2: {} } }, methods: { submit() { // 标记所有表单是否通过校验的变量 let isValid = true // 遍历表单数组,依次对每个表单进行校验 this.formRefs.forEach(ref => { this.$refs[ref].validate(valid => { if (!valid) { isValid = false } }) }} // 如果所有表单都校验通过,执行提交操作 if (isValid) { // 执行提交操作 } } } }
好了,以上就是vue框架中一个页面有多个el-form表单提交时统一校验的2个方法,这两个方法可以运用于不同的条件,你可以根据自己的需求来选择使用。
地址:绵阳市临园路东段78号B座13层
电话:0816-6339181
邮箱:kf@kf51.cn
微信公众号:
Copyright © 绵阳动力网站建设 www.kf51.cn All Rights Reserved 蜀ICP备08100083号