Django验证码*短信验证码之4-短信验证码前端逻辑(Vue绑定短信验证码界面、axios请求短信验证码)

Vue绑定短信验证码界面

register.html

<li>
    <label>短信验证码:</label>
    <input type="text" v-model="sms_code" @blur="check_sms_code" name="sms_code" id="msg_code" class="msg_input">
    <a @click="send_sms_code" class="get_msg_code">[[ sms_code_tip ]]</a>
    <span class="error_tip" v-show="error_sms_code">[[ error_sms_code_message ]]</span>
</li>

register.js

check_sms_code(){
    if(this.sms_code.length != 6){
        this.error_sms_code_message = '请填写短信验证码';
        this.error_sms_code = true;
    } else {
        this.error_sms_code = false;
    }
},

axios请求短信验证码

发送短信验证码事件处理

send_sms_code(){
    // 避免重复点击
    // 校验参数
    // 请求短信验证码
},