element-ui el-from 开发注册页面

一、功能点

1、element-ui el-from表单规则动态验证：
:rules=“ruleForm.type == ‘phone’ ? rules1 : rules2”
2、时间间隔，发送验证码
3、密码验证

二、页面实现图

三、 vue代码

<section>
     <el-form
       :model="ruleForm"
       :rules="ruleForm.type == 'phone' ? rules1 : rules2"
       ref="ruleForm"
       label-width="0px"
       class="login-form"
       status-icon
     >
       <el-form-item prop="type">
         <el-radio-group v-model="ruleForm.type" @change="typeChange">
           <el-radio label="phone">手机</el-radio>
           <el-radio label="email">邮件</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item prop="userName">
         <el-input
           v-model="ruleForm.userName"
           size="small"
           auto-complete="off"
           placeholder="请输入用户名"
         >
           <i slot="prefix" class="icon-yonghuming" />
         </el-input>
       </el-form-item>
       <el-form-item v-if="ruleForm.type === 'phone'" prop="phone">
         <el-input v-model="ruleForm.phone" placeholder="请输入手机号">
           <i slot="prefix" class="el-icon-phone" />
         </el-input>

         <!-- <span class="status"></span> -->
       </el-form-item>
       <el-form-item v-if="ruleForm.type === 'email'" prop="email">
         <el-input v-model="ruleForm.email" placeholder="请输入邮箱">
           <i slot="prefix" class="el-icon-message" />
         </el-input>

         <!-- <span class="status"></span> -->
       </el-form-item>
       <el-form-item prop="code">
         <div class="dp-flex">
           <el-input v-model="ruleForm.code" placeholder="请输入验证码">
             <!-- <i slot="prefix" class="icon-yonghuming" /> -->
           </el-input>
           <el-button
             class="code-btn"
             v-if="statusMsg == '发送验证码' || statusMsg ==