el-form动态表单验证（v-if、v-show导致校验失效的bug）

今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。
一开始我以为是prop没绑定或者绑定错了
![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lTRDI0Njg=,size_16,color_FFFFFF,t_70)

  <div class="content" v-if="isUserName">
               <p class="title"> 账号密码登录</p>
              <span style="position: absolute;top: 50px;left:41px;width:108px;height:4px;background:rgba(13,233,207,1);opacity:1;border-radius:5px 5px 0px 0px;"></span>
              <el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="41px">
                  <el-form-item label="" prop="username" style="margin-bottom:16px;">
                      <el-input
                        placeholder="请输入账号"
                        v-model="loginForm.username">
                        <i slot="prefix" style="color:#00E8CF"  class="iconfont iconzhanghu1"></i>
                      </el-input>
                  </el-form-item>
                  <el-form-item label="" prop="password" style="margin-bottom:14px;">
                      <el-input
                        placeholder="请输入密码"
                        show-password
                        v-model="loginForm.password">
                        <i slot="prefix" style="color:#00E8CF" class="iconfont iconmima-suo1"></i>
                      </el-input>
                  </el-form-item>
                  <el-form-item label="" style="margin-bottom:28px;">
                     <div class="tip">
                      <el-checkbox v-model="checked" @change='savePassword'>自动登录</el-checkbox>
                      <span class="forgetpassword" @click="forGetPassWord">忘记密码?</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="">
                    <div class="log">
                         <el-button @click="handleLogin">登录</el-button>
                    </div>
                  </el-form-item>
              </el-form>
            </div>
        <div class="forget_password"  v-if="!isUserName">
          <p class="title"> 忘记密码</p>
          <span style="position: absolute;top: 25px;left:41px;width:72px;height:4px;background:rgba(13,233,207,1);opacity:1;border-radius:5px 5px 0px 0px;"></span>
              <el-form ref="forgetForm" :rules="rules2" :model="forgetForm" label-width="41px">
                        <el-form-item label="" prop="phone" style="margin-bottom:16px;margin-top:24px;">
                            <el-input
                              placeholder="请输入手机号"
                              v-model="forgetForm.phone">
                              <i slot="prefix" style="color:#00E8CF"  class="iconfont iconshoujihaodenglu"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" prop="authcode" style="margin-bottom:16px;">
                          <div class="getauthcode">
                            <span class="getauthcode1">
                                <el-input
                              placeholder="请输入验证码"
                              v-model="forgetForm.authcode">
                              <i slot="prefix" style="color:#00E8CF" class="iconfont iconyanzhengma"></i>
                            </el-input>
                            </span>
                            <span class="getauthcode2">
                              <el-button @click="getVerificationCode">{{getcode}}</el-button>
                            </span>
                          </div>
                        </el-form-item>
                        <el-form-item label="" prop="newpassword" style="margin-bottom:16px;">
                            <el-input
                              placeholder="6~8位密码，需包含数字和字母"
                              show-password
                              v-model="forgetForm.newpassword">
                              <i slot="prefix" style="color:#00E8CF"  class="iconfont iconmima-suo1"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="">
                          <div class="log">
                              <el-button @click="handleLogin2">重置密码</el-button>
                          </div>
                        </el-form-item>
                    </el-form>
                    <div class="return_login">
                      <span>
                           <i style="color:#00E8CF"  class="el-icon-back"></i>
                      </span>
                      <strong @click="returnLogin">返回登录</strong>
                    </div>
        </div>

 rules: {
              username: [{required: true, trigger: 'blur', message: "请输入账号"}],
              password: [{required: true, trigger: 'blur', message: "请输入密码"}]
            },
            rules2: {
                phone: [{required: true, trigger: 'blur', message: "请输入手机号"}],
                authcode: [{required: true, trigger: 'blur', message: "请输入验证码"}],
                newpassword: [{required: true, trigger: 'blur', message: "请输入新密码"},
                    // { pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,8}$/, message: '长度在 6 到 8 个字符,包含数字和字母'}
                ],

            },

后面发现其实是vue的语法影响 把外面的v-if改成v-show就可以生效了，或者绑定个key值