Element UI注册模块实现

简介

在项目开发过程中，遇到注册页面，该如何快速开发呢，接下来我用element ui 来实现，老司机开车请坐好

安装element ui 请大家自行百度 ，网上的方法有很多，在这里只演示如何实现 

HTML代码

  <section>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="昵称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" style="margin-buttom:10px;!important">
          <el-input v-model="ruleForm.email"></el-input>
          <el-button size="mini" round @click="sendMsg">发送验证码</el-button>
          <span class="status">{
   
   {statusMsg}}</span>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="ruleForm.code" maxlength="4"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="ruleForm.pwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" type="password" prop="cpwd">
          <el-input v-model="ruleForm.cpwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="register">同意以下协议并注册</el-button>
          <div class="error">{
   
   {error}}</div>
        </el-form-item>
        <el-form-item>
          <a
            class="f1"
            href="https://rules-center.meituan.com/rules-detail/4"
            target="_blank"
          >《美团点评用户服务协议》</a>
        </el-form-item>
      </el-form>
    </section>

css样式代码

.page-register {
    
    
  .header {
    
    
    header {
    
    
      margin: 0 auto;
      padding: 10px 0;
      width: 980px;

      .site-logo {
    
    
        display: inline-block;
        width: 128px;
        width: 54px;
        height: 36px;
        text-indent: -9999px;
        background-position: -669px -748px;
        background-image: url(//s0.meituan.net/bs/file/?f=fe-sso-fs:build/assets/sp-normal.2ee5c09.png);
      }

      .login {
    
    
        float: right;
      }

      .bold {
    
    
        font-style: normal;
      }
    }
  }

  >section {
    
    
    margin: 0 auto 30px;
    padding-top: 30px;
    width: 980px;
    min-height: 300px;
    padding-right: 550px;
    box-sizing: border-box;

    .status {
    
    
      font-size: 12px;
      margin-left: 20px;
      color: #e6a23c;
    }

    .error {
    
    
      color: red;
    }
  }
}

JavaScript逻辑代码

  data() {
    
    
    return {
    
    
      statusMsg: '',
      error: '',
      ruleForm: {
    
    
        name: '',
        pwd: '',
        code: '',
        cpwd: '',
        email: '',
      },
      rules: {
    
    
        name: [
          {
    
    
            require: true,//必填
            type: 'string',//约束类型
            message: '请输入昵称',//提示信息
            trigger: 'blur',//触发方式，失去焦点触发
          },
        ],
        email: [
          {
    
    
            require: true,
            type: 'email',
            message: '请输入邮箱',
            trigger: 'blur',
          },
        ],
        pwd: [
          {
    
    
            require: true,
            message: '创建密码',
            trigger: 'blur',
          },
        ],
        cpwd: [
          {
    
    
            require: true,
            message: '确认密码',
            trigger: 'blur',
          },
          {
    
    
            validator(rule, value, callback) {
    
    //验证判断，逻辑判断
              if (value === '') {
    
    
              //如果值为空抛出错误
                callback(new Error('请再次输入密码'))
              } else if (value !== this.ruleForm.pwd) {
    
    
              //如果密码不匹配也同样抛出错误
                callback(new Error('两次输入的密码不一样'))
              } else {
    
    
              //没有问题，回调执行
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        code: [[]],
      },
    }
  },

谢谢观看，如有不足，敬请指教