用vue实现登录页面

最新推荐文章于 2024-07-09 11:00:37 发布

weixin_30436891

最新推荐文章于 2024-07-09 11:00:37 发布

阅读量2k

点赞数 2

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/DCL1314/p/8746818.html

版权

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>

转载于:https://www.cnblogs.com/DCL1314/p/8746818.html

weixin_30436891

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
用vue实现登录页面

vue和mui一起完成登录页面（在hbuilder编辑器）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1...
复制链接

扫一扫