vue+element-ui 实现弹窗验证用户信息

<el-card >
        <div style="margin-top: 15px;">
            <el-row :gutter="20">
                <!-- 整个行占的宽度是24个格子，span=9就是占其中的9个格子 -->
                <el-col :span="9"><el-input 
                placeholder="请输入内容" 
                v-model="queryInfo.query" 
                clearable
                @clear="getUserList">
                <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
            </el-input></el-col>
                <el-col :span="4"> 
                    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
                </el-col>
                </el-row>
                <el-dialog
                  title="请输入用户信息"
                  :visible.sync="dialogVisible"
                  width="30%">
                  <el-form :model="UserList" ref="UserListRef" label-width="100px" :rules="UserListrules">
                    <el-form-item label="用户名" prop="username">
                      <el-input v-model="UserList.username" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                      <el-input v-model="UserList.password" ></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                      <el-input v-model="UserList.email" ></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                      <el-input v-model="UserList.mobile" ></el-input>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('UserList')" >取 消</el-button>
                    <el-button type="primary" @click="addperson">确 定</el-button>
                  </span>
                </el-dialog>
                <!-- 修改用户的对话框 -->
                <el-dialog
                  title="修改用户信息"
                  :visible.sync="editUserVisible"
                  width="50%"
                  @close="resetEditForm"
                >
                  <el-form
                  label-position="right"
                  label-width="80px"
                  :model="editForm"
                  :rules="UserListrules"
                  ref="editFromRef"
                  >
                    <el-form-item label="用户名">