vue+element-ui 的多个表单验证提示问题

Question

如图所示，我设置了两个表单并都做了校验，
但当我在第一个表单输入时出现的校验信息，
在第二个表单却也出现校验信息。贴上代码

<!--密码登录-->
        <el-form ref="passwordLogin" :model="passwordLogin" :rules="passwordLoginrules" class="login-form" v-if="active == 1">
          <el-form-item prop="phone">
            <el-input
              placeholder="请输入手机号"
              icon="user"
              class="login-input"
              v-model="passwordLogin.phone"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="6到18位字符组成的密码"
              icon="password"
              class="login-input"
              v-model="passwordLogin.password"></el-input>
          </el-form-item>
          <el-button type="success" @click="onSubmit" size="large" style="width: 100%;">登录</el-button>
          <el-form-item class="loginbottom">
            <el-checkbox-group v-model="passwordLogin.type" class="remember">
              <el-checkbox label="记住我" name="type"></el-checkbox>
            </el-checkbox-group>
            <a href="javascript:;" class="forget-password">忘记密码？</a>
          </el-form-item>
        </el-form>
        <!--快捷登录-->
        <el-form ref="phoneLogin" :model="phoneLogin" :rules="phoneLoginrules" class="login-form" v-if="active == 2">
          <el-form-item prop="phone">
            <el-input
              placeholder="请输入手机号"
              icon="user"
              class="login-input"
              v-model="phoneLogin.phone"></el-input>
          </el-form-item>
          <el-form-item prop="record">
            <el-input
              placeholder="请输入短信验证码"
              icon="phone"
              class="login-input-record"
              ></el-input>
            <el-button @click="record" class="login-record-button">获取验证码</el-button>
          </el-form-item>
          <el-button type="success" @click="onSubmit" size="large" style="width: 100%;">登录</el-button>
          <p class="login-desc">未注册过的手机号将自动创建为生子无忧用户</p>
        </el-form>

data () {
      return {
        passwordLogin:{
          phone: '',
          password: '',
          type: [],
        },
        passwordLoginrules: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 3, max: 5, message: '请输入正确的手机号码', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          type: [
            { type: 'arry', required: true, message: '请选择', trigger: 'change' }
          ]
        },
        phoneLogin:{
          phone: '',
          record: '',
        },
        phoneLoginrules: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 3, max: 5, message: '请输入正确的手机号码', trigger: 'blur' }
          ],

        },
        active: 1,
      }
    },

Answer 1

改成v-show，用v-if切换，dom删除了，但是样式还在，估计有影响。

Answer 2

el-form 加key 就能区分了

Answer 3

记住我的checkbox组件的el-form-item没有加prop属性吧

Answer 4

用 v-show 代替 v-if 并结合自定义验证器一起使用

    // 如下：
    data() {
      const validatePrintName = (rule, value, callback) => {
        if (this.active == 2 && !value) {
          callback(new Error('请输入内容'))
        } else {
          callback()
        }
      }
      return {
          rules: {
              printName: [{ required: true, validator: validatePrintName, trigger: ['blur', 'change']}]
          }
      }
   }

Answer 5

点击获取验证码 怎么判断是否输入正确的手机号