study_sm/src/containers/register/register.vue

<style lang="less">
  @import "./register.less";

</style>

<template>
  <div class="main">
    <navbar :user="user"></navbar>
    <div class="main-reg">
      <form ref="regForm" style="margin: 50px auto;">
        <!-- active0 -->
        <ul class="fhlist" style="width: 600px;margin:0 auto">
          <li class="mt10">
            <span class="title">
              <em class="fvx">*</em>手机号</span>

            <input type="text" name="phone" v-model="phone" class="ui-ipt iptform" :disabled="!!count" placeholder="输入手机">

            <span class="formver ng-scope" v-if="phone && phone.length!=11">
              <span class="p-ico ico-formver"></span>
              <span class="p-ico ico-worm"></span>请输入合法手机
            </span>
          </li>

          <li class="mt10">
            <span class="title"><em class="fvx">*</em>校验码</span>
            <input type="text" name="code" v-model="code" class="ui-ipt iptform2" placeholder="输入校验码">

            <el-button class="auth-code" type="primary" v-if="phone.length!=11" disabled>校验码</el-button>
            <el-button class="auth-code" type="primary" v-else-if="!count" @click="getCode()">校验码</el-button>
            <el-button class="auth-code" type="primary" disabled v-else>{{count}} s</el-button>


            <span class="formver ng-scope" style="font-size: 13px;" v-if="err.indexOf('校验码')>-1">
              <span class="p-ico ico-formver"></span>
              <span class="p-ico ico-worm"></span>{{err}}
            </span>

            <!-- <span class="formver ng-scope" v-if="phone.length==11 && code.length<4">
                    <span class="p-ico ico-formver"></span>
                    <span class="p-ico ico-worm"></span>请输入校验码
                  </span> -->
          </li>

          <li class="mt10">
            <span class="title"><em class="fvx">*</em>姓名</span>
            <input type="text" name="name" v-model="name" class="ui-ipt iptform" placeholder="输入真实姓名" clearable>
          </li>

          <li class="mt10">
            <span class="title"><em class="fvx">*</em>身份证</span>
            <input type="text" name="cardId" v-model="cardId" class="ui-ipt iptform" placeholder="输入证件号" clearable>

            <span class="formver ng-scope" v-if="!is_ok_card(cardId)">
              <span class="p-ico ico-formver"></span>
              <span class="p-ico ico-worm"></span>请输入合法的份证号
            </span>
          </li>

          <li class="mt10">
            <span class="title"><em class="fvx">*</em>学历</span>
            <el-select placeholder="选择学历" v-model="education" class=" iptform" >
              <el-option v-for="(item,index) in educationList" :value="item" :label="item" v-bind:key="index" />
            </el-select>
          </li>


          <li class="mt10">
            <span class="title"><em class="fvx">*</em>工作单位</span>
            <input type="text" name="company" v-model="company" class="ui-ipt iptform" placeholder="输入工作单位" clearable>
          </li>


          <!--          <li class="mt10">
                  <span class="title"><em class="fvx">*</em>证书编号</span>
                  <input type="text" name="rzCode" v-model="rzCode" class="ui-ipt iptform" placeholder="输入证书编号" clearable>
                </li> -->




          <li class="mb5">
            <span class="title">
              <em class="fvx">*</em>账户密码</span>
            <input type="password" v-model="password" autocomplete="new-password" class="ui-ipt iptform ng-pristine ng-valid-pattern ng-invalid ng-invalid-required"
              placeholder="请填写登录密码" required="required">

            <span class="formver ng-scope" style="width:300px;font-size: 13px;" v-if="password&&password.length<6">
              <span class="p-ico ico-formver"></span>
              <span class="p-ico ico-worm"></span>请输入6~18位由字母、数字组合的登录密码！
            </span>
          </li>

          <li class="mb5">
            <span class="title">&nbsp;</span>
            <span class="code-case" style="float: left; margin-left: 120px;">
              <em :class="{'c1':passwordLevel==='sick' && password,'c2':passwordLevel==='middle','c3':passwordLevel==='strong'}">低</em>
              <em :class="{'c2':passwordLevel==='middle','c3':passwordLevel==='strong'}">中</em>
              <em class="last" :class="{'c3':passwordLevel==='strong'}">高</em>
            </span>
          </li>

          <li class="mb5">
            <span class="title"><em class="fvx">*</em>确认密码</span>
            <input type="password" name="confirmPassword" validate-password="" v-model="confirmPassword" ng-required="true"
              class="ui-ipt iptform ng-isolate-scope ng-pristine ng-invalid ng-invalid-required" placeholder="请填写登录密码"
              required="required">

            <span class="formver ng-scope" v-if="confirmPassword && confirmPassword!= password">
              <span class="p-ico ico-formver"></span>
              <span class="p-ico ico-worm"></span>前后密码不一致！
            </span>
          </li>

          <li class="mb5">
            <span class="title">&nbsp;</span>
            <span style="font-size: 10px;color: red; text-align: center;">{{err}}</span>
          </li>

          <li class="m-t-20">
            <span class="title">&nbsp;</span>
            <input class="ui-btn btn-r" type="button" value="提 交" :disabled="!cansubmit()" @click="submitData()">
          </li>
        </ul>
      </form>

    </div>
  </div>
</template>
<script>
  import data from "@/components/data/data.js";
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  import navbar from "@/components/nav/navbar.vue";
  import md5 from 'js-md5'
  export default {
    components: {
      navbar
    },
    data() {
      return {
        user: {
          nickname: ''
        },
        count: 0,
        name: '',
        passwordLevel: 'sick',
        password: '',
        educationList: window.baseConfig.educationList,
        confirmPassword: '',
        phone: '',
        code: "",
        err: '',
        cardId: '',
        timer: false,
        rules: data.rulesData(this.validatePass)
      };
    },
    watch: {
      password(val) {
        if (val.length < 6) {
          this.passwordLevel = 'sick';
          return
        }
        let pattern = [/[^0-9a-zA-Z]/, /[0-9a-z]/, /[A-Z]/];
        let patnum = 0
        for (let i = 0; i < pattern.length; i++) {
          if (pattern[i].test(val)) patnum++
        }
        if (patnum == 3) {
          this.passwordLevel = 'strong';
        } else if (patnum == 2) {
          this.passwordLevel = 'middle';
        } else {
          this.passwordLevel = 'sick';
        }
      }
    },
    methods: {
      submitData() {
        let that = this
        let param = {
          name: this.name,
          phone: this.phone,
          code: this.code,
          company: this.company,
          education: this.education,
          cardId: this.cardId,
          password: md5(this.password)
        }
        httpServer("Auth.register", param).then(res => {
          if (res.code == 200) {
            this.$msgbox({
              title: "注册成功",
              message: "恭喜你-注册成功",
              showCancelButton: false,
              confirmButtonText: "回到登入页面",
              beforeClose: (action, instance, done) => {
                that.$router.push('/');
                done();
              }
            })
          } else {
            this.err = res.msg;
          }

        })

      },
      checkPhone() {
        let phone = this.phone;
        if (!/^1[3456789]\d{9}$/.test(phone)) {
          this.$message.error("请填写正确的手机号");
          return false;
        }
        return true
      },
      validatePass(rule, value, callback) {
        if (value == this.password) {
          callback();
        } else {
          callback(new Error("两次密码不服"));
        }
      },
      getCode() {
        if (!this.checkPhone()) return;
        let phone = this.phone
        let type ="register"

        httpServer("Auth.getCode", {phone,type}).then(res => {
          if (res.code == 200) {
            this.$message.successMsg("发送成功", 1)
            this.startTimer()
          }
        })
      },
      startTimer() {
        const TIME_COUNT = 60; //更改倒计时时间
        if (this.timer) clearInterval(this.timer);
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0) {
            this.count--;
          } else {
            clearInterval(this.timer); // 清除定时器
            this.timer = null;
            this.count = 0;
          }
        }, 1000)
      },
      is_ok_card( cardId ){
        if( !cardId ) return false;
        if( cardId.indexOf('H')>-1 || cardId.indexOf('W') >-1){
            return cardId.length==9 || cardId.length ==11;
        }
        return cardId.length ==18;

      },
      cansubmit() {
        if (this.isPhoneErr()) return false;
        if (!this.is_ok_card(this.cardId)) return false;
        if (!this.name) return false;
        if (!this.password || this.password != this.confirmPassword) return false;
        if (this.password.length < 6) return false;
        if (this.code.length < 4) return false;
        return true;
      },
      isPhoneErr() {
        return !/^[\d]{11}$/.test(this.phone);
      }
    }
  }
</script>