lida-app/src/page/user/register.vue

<template>
  <div>
    <div v-loading="regis_login" class="card" style="margin-top: 10px">
      <NGradientText f-c-c size="18" style="padding: 10px" type="warning">注册账号</NGradientText>
      <div class="card-line"></div>
      <NForm
        ref="formRef"
        :model="fromdata"
        :rules="rules"
        label-align="right"
        label-placement="left"
        label-width="auto"
        style="padding: 24px 10px 10px">
        <NFormItem label="手机号" path="tel">
          <NInput v-model:value="fromdata.tel" placeholder="请输入手机号" />
        </NFormItem>
        <NFormItem label="车牌号" path="car">
          <NInput v-model:value="fromdata.car" placeholder="请输入车牌号" />
        </NFormItem>
        <NFormItem label="密码" path="pass">
          <NInput v-model:value="fromdata.pass" placeholder="请输入密码" type="password" />
        </NFormItem>
        <NFormItem label="确认密码" path="passre">
          <NInput v-model:value="fromdata.passre" placeholder="请输入确认密码" type="password" />
        </NFormItem>
        <NFormItem label="验证码" path="captcha">
          <div style="display: flex; width: 100%">
            <NInput
              v-model:value="fromdata.captcha"
              placeholder="请输入验证码"
              style="flex-grow: 1; border-bottom-right-radius: 0; border-top-right-radius: 0" />
            <img
              :src="cpaimg"
              b-r
              height="34"
              style="border-bottom-right-radius: 3px; border-top-right-radius: 3px"
              width="85"
              @click="captchas" />
          </div>
        </NFormItem>
      </NForm>
      <div f-c-c>
        <NText style="padding-right: 5px">我已已经有账号了</NText>
        <RouterLink to="/user/login">前往登录</RouterLink>
      </div>
      <div class="card-line" style="margin-top: 24px"></div>
      <div style="padding: 10px">
        <NButton secondary strong style="width: 100%" type="info" @click="regis">注册</NButton>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { type FormInst, type FormItemRule } from 'naive-ui';
import { onMounted, reactive, ref } from 'vue';
import message from '@/utils/message.ts';
import { captcha, register } from '@/apis/auth';
import { UserStore } from '@/plugins';
import UseApiLoading from '@/utils/UseApiLoading.ts';

const cpaimg = ref('');
const formRef = ref<FormInst | null>(null);

const userStore = UserStore();

const fromdata = reactive({ tel: '', car: '', pass: '', passre: '', captcha: '', uuid: '' });
const [[regis_login], regise] = UseApiLoading(register);
const regis = () => {
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      regise(fromdata)
        .then((a) => {
          userStore.ishaslogin = true;
          userStore.token = a.json().Data;
          userStore.getLogin();
          window.location.replace('/');
        })
        .catch(() => {
          captchas();
          fromdata.captcha = '';
        });
    } else {
      message.error('请确认 填写信息是否正确');
    }
  });
};
const captchas = () => {
  captcha().then((a) => {
    fromdata.uuid = a.json().Data.uuid;
    cpaimg.value = a.json().Data.captcha;
  });
};
const rules = {
  tel: {
    key: 'tel',
    required: true,
    message: '手机号不正确',
    trigger: ['input'],
    validator(rule: FormItemRule, value: string) {
      return RegExp('^1[3-9]\\d{9}$').test(value);
    },
  },
  car: {
    key: 'car',
    required: true,
    message: '车牌号不正确',
    trigger: ['input'],
    validator(rule: FormItemRule, value: string) {
      return RegExp(
        '^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-HJ-NP-Za-hj-np-z][A-HJ-NP-Za-hj-np-z0-9]{4}[A-HJ-NP-Za-hj-np-z0-9]([A-HJ-NP-Za-hj-np-z])?$',
      ).test(value);
    },
  },
  pass: {
    key: 'pass',
    required: true,
    message: '最小8位，最大256位',
    trigger: ['input'],
    min: 8,
    max: 256,
  },
  passre: {
    key: 'passre',
    required: true,
    message: '密码不匹配',
    trigger: ['input'],
    validator(rule: FormItemRule, value: string) {
      return fromdata.pass === value;
    },
  },
  captcha: {
    key: 'captcha',
    required: true,
    message: '验证码格式不正确 4位数字',
    trigger: ['input'],
    validator(rule: FormItemRule, value: string) {
      const a = RegExp('^\\d{4}$').test(value);
      console.log(a);
      return a;
    },
  },
};
onMounted(() => captchas);
</script>
<style lang="scss" scoped></style>