这两天项目里面涉及到注册的页面,摸索了一天终于实现了,现在整理一下分享给大家
这是页面,有手机号、密码、确认密码、验证码、同意用户协议。
其中有几个有关联的地方(表单验证就不说了) 还有一共调用三个接口(接口一:验证手机是否注册;接口二:发送验证码;接口三:注册提交表单)
1、调用接口一时 首先判断手机号是否注册过,data里面加一个变量isSignPhone 默认false 当用户输入无误的号码,失去焦点是触发事件并调用接口,检测是否存在该号码 存在=》 isSignPhone 改为true,并且可以在手机号的input框后面加一个div v-if="isSignPhone'(控制显示隐藏,你在判断是否注册时,这个就已经跟着在改变了,这一步也显示了vue是数据驱动的概念) 提示“该号码已注册”(因为muse-ui的表单验证很硬,完全不知道怎么去修改运用,所以用框架有利有弊) 。
2、调用接口二时 首先判断验证码的disabled属性。data里面加一个变量 alert 默认为true 并且用:disabled="alert" 绑定到该属性 ,其实可以跟isSignPhone共用一个,因为脑力有限,各司其职看的清一些。这一步跟手机号的是否注册有关联。
3、调用接口三时 表单验证看是否通过