目录
一、注册功能实现
本次主要讲如何实现注册功能,即如何将用户填写的注册信息填写到后台。
除此之外很多细节还值得我们注意,例如:
1.注册的号码应该通过正则表达式来规范号码格式,而不能乱输;
2.发送验证码需要设置定时器,在等待过程中,发送按钮应该是禁用的;
3.密码的设置也应该通过正则表达式来控制
4.所有信息都填写正确,勾选上才可以点击注册按钮进行注册
5.注册成功后,应该跳转到登录页,进行登录
①首先要获取用户输入的信息,通过vant组件中本身带有的value我们可以成功获取数据
②获取数据成功后,我们让它能否注册成功要看它是否所有的信息都填写了,是否勾选了
③符合要求就将数据post传入到后台的json数据中,即注册成功;不符合要求则提醒用户要填写正确的用户信息
<!-- 视图层 -->
<template>
<!-- 注册页面 -->
<!-- 返回按钮 -->
<van-nav-bar left-arrow @click-left="onClickLeft" />
<!-- logo图标 -->
<div class="logo">LOGO</div>
<!-- 表单 -->
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-cell-group inset>
<van-field
v-model="value1"
clearable
left-icon="phone-o"
label=" "
label-width="1"
label-align="left"
placeholder="输入手机号码"
/>
</van-cell-group>
<van-cell-group inset>
<van-field
v-model="sms"
center
clearable
label=" "
label-width="1"
label-align="left"
left-icon="chat"
placeholder="请输入短信验证码"
>
<template #button>
<van-button size="small" type="primary" class="yz_btn"
>发送验证码</van-button
>
</template>
</van-field>
</van-cell-group>
<van-cell-group inset>
<van-field
v-model="value2"
clearable
left-icon="info"
label=" "
label-width="1"
label-align="left"
type="password"
placeholder="设置密码登录"
/>
</van-cell-group>
</van-cell-group>
<!-- 协议确认 -->
<div class="agreement">
<van-checkbox
v-model="checked"
checked-color="#1ABC9C"
@click="check"
label-disabled="true"
>
<span class="text2">
已阅读并同意《<span class="text1" @click="agreement"
>用户协议服务</span
>》</span
>
</van-checkbox>
</div>
<!-- 确认按钮 -->
<div style="margin: 16px">
<van-button
round
block
type="primary"
native-type="submit"
class="register"
@click="determine"
>
确认
</van-button>
</div>
</van-form>
</template>
<!-- 逻辑层 -->
<script setup>