登录卡片加滑块验证

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet">
        <style scoped>
            .drag {
                border-radius: 20px;
                position: relative;
                background-color: #75CDF9;
                width: 300px;
                height: 34px;
                line-height: 34px;
                text-align: center;
            }
            
            .handler {
                border-radius: 20px;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 40px;
                height: 32px;
                border: 1px solid #ccc;
                cursor: move;
            }
            
            .handler_bg {
                background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
            }
            
            .handler_ok_bg {
                background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
            }
            
            .drag_bg {
                border-radius: 20px;
                background-color: #13CE66;
                height: 34px;
                width: 0px;
            }
            
            .drag_text {
                position: absolute;
                top: 0px;
                width: 300px;
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                -o-user-select: none;
                -ms-user-select: none;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <el-row>
                <el-col :offset="2" :span="6">
                    <el-card shadow="always" style="text-align: center;">
                        <h3 style="margin-top: 0px;">用户登录</h3>
                        <el-form :model="loginData" ref="loginData" label-width="0px" :rules="rules" class="demo-ruleForm">
                            <el-form-item prop="userName">
                                <el-input placeholder="请输入用户名" v-model="loginData.userName"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type='password' placeholder="请输入密码" v-model="loginData.password"></el-input>
                            </el-form-item>
                            <el-form-item prop="verificationID">
                                <div class="drag">
                                    <div class="drag_bg"></div>
                                    <div class="drag_text">{{confirmWords}}</div>
                                    <div @mousedown="mousedownFn($event)" class="handler handler_bg"></div>
                                </div>
                            </el-form-item>
                                <p style="color: #f56c6c;" v-if="validateUser">用户名或密码错误</p>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('loginData')">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    beginClientX: 0,
                    /*距离屏幕左端距离*/
                    mouseMoveStata: false,
                    /*触发拖动状态 判断*/
                    maxwidth: 258,
                    /*拖动最大宽度，依据滑块宽度算出来的*/
                    confirmWords: '拖动滑块验证',
                    /*滑块文字*/
                    confirmSuccess: false,
                    /*验证成功判断*/
                    loginData: {
                        userName: '',
                        password: '',
                        verificationID: ''
                    },
                    validateUser:true,
                    rules: {
                        userName: [{
                                required: true,
                                message: '请输入用户名',
                                trigger: 'blur'
                            },

                        ],
                        password: [{
                                required: true,
                                message: '请输入密码',
                                trigger: 'blur'
                            },

                        ],
                        verificationID: [{
                                required: true,
                                message: '请拖动滑块至标准位置',
                                trigger: 'blur'
                            },

                        ],
                    },
                },
                methods: {
                    submitForm(formName) {
                        this.$refs[formName].validate((valid) => {
                            if(valid) {
                                alert('submit!');
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    },
                    mousedownFn: function(e) {
                        this.mouseMoveStata = true;
                        this.beginClientX = e.clientX;
                    }, //按下滑块函数 
                    successFunction() {
                        $(".handler").removeClass('handler_bg').addClass('handler_ok_bg');
                        this.confirmWords = '验证通过'
                        $(".drag").css({
                            'color': '#fff'
                        });
                        $(".drag").css({
                            'background-color': '#13CE66'
                        });
                        $(".handler").css({
                            'left': this.maxwidth
                        });
                        $(".drag_bg").css({
                            'width': this.maxwidth
                        });
                        $('body').unbind('mousemove');
                        $('body').unbind('mouseup');
                        this.confirmSuccess = true;
                        this.getVerificationID();
                    }, //验证成功函数 
                    getVerificationID: function() {
                        let id = this;
                        $.ajax({
                            type: "get",
                            url: "#",
                            async: true,
                            dataType: 'json',
                            success: function(data) {
                                id.loginData.verificationID = data.verificationID;
                            },
                            error: function(error) {
                                alert(1222);
                                id.loginData.verificationID = '12';
                            }
                        });
                    },

                },
                mounted() {
                    $('body').on('mousemove', (e) => {
                        //拖动，这里需要用箭头函数，不然this的指向不会是vue对象 
                        if(this.mouseMoveStata) {
                            var width = e.clientX - this.beginClientX;
                            if(width > 0 && width <= this.maxwidth) {
                                $(".handler").css({
                                    'left': width
                                });
                                $(".drag_bg").css({
                                    'width': width
                                });
                            } else if(width > this.maxwidth) {
                                this.successFunction();
                            }
                        }
                    });
                    $('body').on('mouseup', (e) => {
                        //鼠标放开 
                        this.mouseMoveStata = false;
                        var width = e.clientX - this.beginClientX;
                        if(width < this.maxwidth) {
                            $(".handler").css({
                                'left': 0
                            });
                            $(".drag_bg").css({
                                'width': 0
                            });
                        }
                    })
                }
            });
        </script>
    </body>

</html>