【Vue前端】Vue前端注冊業務實現！！！【代碼】

用戶注冊前端邏輯

 

1. Vue綁定注冊界面准備

1.導入Vue.js庫和ajax請求的庫

<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
<script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>

　　

 

2.准備register.js文件

<script type="text/javascript" src="{{ static('js/register.js') }}"></script>

　　

2. Vue綁定注冊界面實現

Vue文檔

• 重要提示：以Vue綁定注冊表單及用戶名和密碼為例

1.register.html

• 綁定內容：變量、事件、錯誤提示等

<form method="post" class="register_form" @submit="on_submit">
    {{ csrf_input }}
    <ul>
        <li>
            <label>用戶名:</label>
            <input type="text" name="user_name" id="user_name" v-model="username" @blur="check_username">
            <span class="error_tip" v-show="error_username">[[error_username_message]]</span>
        </li>
        <li>
            <label>密碼:</label>
            <input type="password" name="pwd" id="pwd" v-model="password" @blur="check_password">
            <span class="error_tip" v-show="error_password">[[error_password_message]]</span>
        </li>
        <li>
            <label>確認密碼:</label>
            <input type="password" name="cpwd" id="cpwd" v-model="password2" @blur="check_confirm_password">
            <span class="error_tip" v-show="error_confirm">[[error_confirm_message]]</span>
        </li>
        <li>
            <label>手機號:</label>
            <input type="text" name="phone" id="phone" v-model="mobile" @blur="check_mobile">
            <span class="error_tip" v-show="error_mobile">[[error_mobile_message]]</span>
        </li>
        <li>
                            <label>圖形驗證碼:</label>
                            <input type="text" name="pic_code" id="pic_code" class="msg_input">
                            <img src="/static/images/pic_code.jpg" alt="圖形驗證碼" class="pic_code">
                            <span class="error_tip">請填寫圖形驗證碼</span>
                        </li>
        <li>
            <label>短信驗證碼:</label>
            <input type="text" name="msg_code" id="msg_code" class="msg_input">
            <a href="javascript:;" class="get_msg_code">獲取短信驗證碼</a>
            <span class="error_tip">請填寫短信驗證碼</span>
        </li>
        <li class="agreement">
            <input type="checkbox" name="allow" id="allow" checked="checked" v-model="allow">
            <label>同意”美多商城用戶使用協議“</label>
            <span class="error_tip" v-show="error_allow">[[error_allow_message]]</span>
        </li>
        <li class="reg_sub">
            <input type="submit" value="注 冊">
        </li>
    </ul>
    </form>

　　

2.register.js

• 綁定內容：變量、事件、錯誤提示等
• .用戶交互事件實現（register.js）

var vm = new Vue({
    el:'#app',
    delimiters:["[[","]]"],
    data:{
        //接收參數
        username:'',
        password:'',
        password2:'',
        mobile:'',
        allow:'',
        //提示標記
        error_username:false,
        error_password:false,
        error_confirm:false,
        error_mobile:false,
        error_allow:false,
        //錯誤信息展示
        error_username_message:'',
        error_password_message:'',
        error_confirm_message:'',
        error_mobile_message:'',
        error_captcha_message:'',
        error_allow_message:'',
    },
    methods:{
        //檢測用戶名
        check_username:function () {
            let re = /^[a-zA-Z0-9_]{5,20}$/;
            if(re.test(this.username)){
                this.error_username=false;
            }else {
                this.error_username_message='請輸入5-20個字符的用戶';
                this.error_username=true;
            }
        },
        //檢測密碼
        check_password:function () {
            let re = /^[a-zA-Z0-9]{8,20}$/;
            if(re.test(this.password)){
                this.error_password=false;
            }else {
                this.error_password_message='請輸入8-20個字符密碼';
                this.error_password=true;
            }
        },
        //檢測確認密碼
        check_confirm_password:function () {
            if(this.password2 != this.password){
                this.error_confirm=true;
                this.error_confirm_message='兩次輸入的密碼不一致'
            }else{
                this.error_confirm=false;
            }
        },
        //檢測手機號
        check_mobile:function () {
            let re = /^1[3-9]\d{9}$/;
            if(re.test(this.mobile)){
                this.error_mobile=false;
            }else{
                this.error_mobile=true;
                this.error_mobile_message='請輸入正確的手機號碼';
            }
        },
        //提交注冊按鈕
        on_submit:function () {

            this.check_username();
            this.check_password();
            this.check_confirm_password();
            this.check_mobile();

            if(this.error_username==true||this.error_password==true||this.error_confirm==true||this.error_mobile==true){
                window.event.returnValue=false;
            }

        },
    }
})