生成的微信小程序手机验证码登录组件代码

大鱼

<template>
  <div>
    <input type="tel" v-model="phone" placeholder="请输入手机号">
    <button :disabled="!isPhoneValid" @click="sendCode">获取验证码</button>
    <br>
    <input type="text" v-model="code" placeholder="请输入验证码">
    <button :disabled="!isCodeValid" @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      code: '',
      isPhoneValid: false,
      isCodeValid: false
    }
  },
  computed: {
    isPhoneValid() {
      return /^1[3-9]\d{9}$/.test(this.phone);
    },
    isCodeValid() {
      return this.code.length === 6;
    }
  },
  methods: {
    sendCode() {
      // TODO: 调用短信验证码接口，向用户发送验证码
    },
    login() {
      // TODO: 调用登录接口，验证验证码是否正确，登录成功后获取用户信息
    }
  }
}
</script>

拥抱它吧，先进的生产力工具！

新家园

{:mocs_48:}{:mocs_48:}

沉默的虎

试一下{:mocs_9:}

移动人生

沉默的虎 发表于 2023-4-2 12:04
试一下

代码现在有专门的，写文案类的确实一把好手