cloudnote_web/components/account/register.vue

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item :label="$t('account.form.user')" prop="user">
      <el-input v-model="form.user" :placeholder="$t('input_please',{keyword:$t('account.form.user')})"></el-input>
    </el-form-item>
    <el-form-item :label="$t('account.form.password')" prop="password">
      <el-input v-model="form.password" type="password" :placeholder="$t('input_please',{keyword:$t('account.form.password')})"></el-input>
    </el-form-item>
    <el-form-item class="is-required" :label="$t('account.form.confirmPwd')" prop="confirmPwd">
      <el-input v-model="form.confirmPwd" type="password" :placeholder="$t('input_confirm',{keyword:$t('account.form.password')})"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">{{$t('account.register')}}</el-button>
      <el-button @click="$refs.form.resetFields()">{{$t('reset')}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">

  import Vue from 'vue'

  export default Vue.extend({
    name: 'register',
    data(){
      let that=this
      return {
        //注册表单
        form:{
          user:'',
          password:'',
          confirmPwd:''
        },
        // 表单校验规则
        rules:{
          user:[{
            required: true,
            message: this.$t('input_please', { keyword: this.$t('account.form.user') }),
          }],
          password:[{
            required: true,
            message: this.$t('input_please', { keyword: this.$t('account.form.password') })
          }],
          confirmPwd:[{
            validator:(rule, value, callback) => {
              if (value === '') {
                callback(new Error(rule.msg.a));
              } else if (value !== that.form.password) {
                callback(new Error(rule.msg.b));
              } else {
                callback();
              }
            },
            msg:{
              a:this.$t('input_confirm', { keyword: this.$t('account.form.password') }),
              b:this.$t('account.form.tip.tow_diff')
            }
          }]
        }
      }
    },
    methods:{
      submit(){
        this.$refs.form.validate((valid: boolean)=>{
          if(valid){
            let that=this
            this.GLOBAL.fetchJSON('/v1/api/users/sign_up','POST',{ userName: this.form.user, password: this.form.password },function(res) {
              if(res.code==='200'){
                that.$message.info(that.$t('account.form.tip.register_ok').toString())
                that.$router.push(that.localePath('/'))
              }else if(res.code==='1101'){
                that.$message.error(that.$t('account.form.tip.user_exit',{name:that.form.user}).toString())
              }else{
                that.$message.error(that.$t('error_500').toString())
              }
            })
          }else{
            this.$message.error({
              message:this.$t('form_err').toString(),
              duration:2000
            })
            return false
          }
        })

      }
    }
  })
</script>