vuex+axios+muse实现注册

这两天项目里面涉及到注册的页面,摸索了一天终于实现了,现在整理一下分享给大家


vuex+axios+muse实现注册_第1张图片

这是页面,有手机号、密码、确认密码、验证码、同意用户协议。

其中有几个有关联的地方(表单验证就不说了)  还有一共调用三个接口(接口一:验证手机是否注册;接口二:发送验证码;接口三:注册提交表单

1、调用接口一时 首先判断手机号是否注册过,data里面加一个变量isSignPhone  默认false 当用户输入无误的号码,失去焦点是触发事件并调用接口,检测是否存在该号码  存在=》 isSignPhone 改为true,并且可以在手机号的input框后面加一个div v-if="isSignPhone'(控制显示隐藏,你在判断是否注册时,这个就已经跟着在改变了,这一步也显示了vue是数据驱动的概念)   提示“该号码已注册”(因为muse-ui的表单验证很硬,完全不知道怎么去修改运用,所以用框架有利有弊) 。  

2、调用接口二时 首先判断验证码的disabled属性。data里面加一个变量 alert 默认为true 并且用:disabled="alert" 绑定到该属性 ,其实可以跟isSignPhone共用一个,因为脑力有限,各司其职看的清一些。这一步跟手机号的是否注册有关联。

3、调用接口三时  表单验证看是否通过


vuex+axios+muse实现注册_第2张图片
vuex+axios+muse实现注册_第3张图片
vuex+axios+muse实现注册_第4张图片
vuex+axios+muse实现注册_第5张图片

你可能感兴趣的:(vuex+axios+muse实现注册)