carInsightSystem/src/views/Login/loginForm/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-19 14:14:52
 * @LastEditTime: 2021-10-19 14:47:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/Login/loginForm/index.vue
-->
<template>
    <div class="lgf-outter">
        <a-form-model layout="horizontal" :model="form" :rules="rules">
            <a-form-model-item label="用户名" prop="phone">
                <a-input v-model="form.phone" placeholder="请输入账号" />
            </a-form-model-item>
            <a-form-model-item label="密码" prop="pwd">
                <a-input v-model="form.pwd" :type="pwdType" placeholder="请输入密码">
                    <span slot="suffix" class="iconfont icon-zhengyan-21 login-eye" v-if="pwdType==='password'" @click="changePwdType"></span>
                    <span slot="suffix" class="iconfont icon-in_biyan login-eye" v-else @click="changePwdType"></span>
                </a-input>
            </a-form-model-item>
            <a-form-model-item label="验证码" prop="code">
                <a-input v-model="form.code" placeholder="请输入验证码">
                    <a-button slot="addonAfter" style="width: 100px" @click="countdown" v-if="showCode">FNMAK</a-button>
                    <a-button slot="addonAfter" style="width: 100px" v-else>{{count}}</a-button>
                </a-input>
            </a-form-model-item>
        </a-form-model>
        <div class="login-d1">
            <a-checkbox v-model="remCheck">
                <span style="color: #3373CC">记住密码</span>
            </a-checkbox>
            <span class="stn" style="color: #3373CC" @click="forgetPassword">忘记密码</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "loginForm",
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                let reg=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;
                if (!reg.test(value)) {
                    callback(new Error("密码由大小写字母、数字和特殊字符组成"));
                } else if(value.length < 8 || value.length > 16) {
                    callback(new Error("密码8~16位"));
                } else {
                    callback();
                } 
            }
        };
        const validateAccount = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入账户"));
            } else {
                let reg=/^[0-9a-zA-Z]*$/;
                if (!reg.test(value)) {
                    callback(new Error("用户名是英文字母或英文字母与数字的组合"));
                } else if(value.length < 8 || value.length > 13) {
                     callback(new Error("账号在8~13位之间"));
                } else {
                    callback();
                }   
            }
        }
        const validateCode = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入验证码"));
            }  else {
                 callback();
            }
        }
        return {
            pwdType: "password",
            remCheck: false,
            count: 0,
            showCode: true,
            timer: null,
            form: {
                phone: "",
                pwd: "",
                code: "",
            },
            rules: {
                phone: [{ validator: validateAccount, trigger: "change" }],
                pwd: [{ validator: validatePass, trigger: "change" }],
                code: [{ validator: validateCode, trigger: "change" }],
            },
        };
    },
    methods: {
        // 改变是否可以看密码
        changePwdType() {
            this.pwdType = this.pwdType === "password" ? "" : "password";
        },
        // 倒计时
        countdown() {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.showCode = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.showCode = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
            }
        },
        //忘记密码
        forgetPassword(){
            this.$emit('forgetPassword')
        }
    },
};
</script>
<style lang="less" scoped>
.lgf-outter {
    width: 380px;
    margin: 0 auto;
    margin-top: 80px;
}
.login-eye {
    font-size: 16px;
    color: #3373cc;
    cursor: pointer;
}
.login-d1 {
    width: 380px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    .stn {
        cursor: pointer;
    }
}
</style>