用vue實現登陸頁面

時間 2019-11-19
標籤 vue 實現登陸頁面简体版
原文原文鏈接
vue和mui一塊兒完成登陸頁面（在hbuilder編輯器）

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
        <title>vue作登陸頁面</title> 
        <link href="css/mui.min.css" rel="stylesheet" /> 
        <link rel="stylesheet" href="font_319767_xof0t45qf9qhyqfr/iconfont.css" />
        <style> 
            #app {
                background: #ffcc33;
                width: 100%;
                padding: 20px;              
            }
            .content {
                width: 100%;
                background: #ff6666;
                padding: 20px;
                    
            }
            .form-group {
                position: relative;
                width: 100%;
                height: 45px;
                margin-bottom: 10px;
            }
            label {
                position: absolute;
                left: 8px;
                top: 10px;
            }
            label i {               
                color: #ff6666;
            }
            .iconfont {
                font-size: 24px;
            }
            .form-group input {
                margin-bottom: 0;
                padding-left: 40px;
            }
            .form-group:nth-child(4) input{
                width: 60%;
            }
            .mui-btn-warning {
                float: right;
                width: 35%;
                height: 40px;
                font-size: 16px;
            }
            .mui-btn-primary {
                width: 100%;
                height: 40px;
                font-size: 16px;
                border-radius: 5px;
            }
        </style> 
     
    </head>      
    <body> 
        <div id="app">
            <div class="content">
                <div class="form-group">
                    <label>
                        <i class="iconfont icon-yonghurenzheng"></i>
                    </label>
                    <input type="text" placeholder="請輸入姓名" v-model.trim="name "/>
                </div>
                <div class="form-group">
                    <label>
                        <i class="iconfont icon-shenfenzheng"></i>
                    </label>
                    <input type="text" placeholder="請輸入身份證號碼" v-model.trim="number"/>
                </div>
                <div class="form-group">
                    <label>
                        <i class="iconfont icon-lianxifangshi"></i>
                    </label>
                    <input type="text" placeholder="請輸入手機號碼" v-model.trim="photo"/>
                </div>
                <div class="form-group">
                    <label>
                        <i class="iconfont icon-duanxin"></i>
                    </label>
                    <input type="text" placeholder="請輸入驗證碼" v-model.trim="code"/>
                    <button type="button" class="mui-btn mui-btn-warning" id="getTel">獲取驗證碼</button>
                </div>
                <div class="form-group">                
                    <button type="button" class="mui-btn mui-btn-primary" @tap="btn">登陸</button>
                </div>
            </div>
        </div>
            
    </body> 
    <script src="js/mui.min.js"></script> 
    <script src="js/vue.js"></script>
    <script> 
        new Vue ({
            el: "#app",
            data: {
                name: "",
                number: "",
                photo: "",
                code: ""
            },
            methods: {              
                btn() {
                    name: this.name;
                    number: this.number;
                    photo: this.photo;
                    card: this.card;
                    
                    if(this.name == ""){
                        mui.toast("請輸入姓名");
                        return;
                    }
                    //身份證驗證
                    var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;   
                    // 身份證號碼爲15位或者18位，15位時全爲數字，18位前17位爲數字，最後一位是校驗位，可能爲數字或字符X
                    if(this.number == ""){
                        mui.toast("請輸入身份證號碼");
                        return;
                    }else if(!regIdNo.test(this.card_no)){
                          mui.toast('身份證號填寫有誤');  
                            return false; 
                    }
                    
                    var regphoto = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
                    if(this.photo == ""){
                        mui.toast("請輸入手機號碼");
                        return;
                    }else if(!regphoto.test(this.tel)){
                        mui.toast("手機號填寫有誤");
                        return false;
                    }
                    
                    if(this.code == ""){
                        mui.toast("請輸入驗證碼");
                        return;
                    }
                    mui.ajax(index.html,{
                        data: {
                            name: this.name,
                            number: this.number,
                            photo: this.photo,
                            card: this.card,
                        },
                        success:function(){
                            mui.alert("登陸成功")
                        }
                    })
                    
                }
            }           
        })
    </script> 
 
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。