vue实现登录页面的表单验证

最新推荐文章于 2024-05-09 10:11:00 发布

青枙如初

最新推荐文章于 2024-05-09 10:11:00 发布

阅读量1.3k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_49425703/article/details/124195816

版权

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Document</title>
    <script src='https://unpkg.com/vue@next'></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }

    .form {
        width: 500px;
        border: 2px solid skyblue;
        padding: 30px 50px;
    }

    label {
        font-weight: 600;
        color: rgba(0, 0, 0, .7);
    }

    .btn {
        font-weight: 600;
        letter-spacing: 1px;
    }

    .top {
        margin-top: 10px;
    }
</style>

<body>
    <div id='app'></div>
    <template id='myroot'>
        <form class="form">
            <div class="form-row" :class="{top:!error.name}">
                <div class="col-md-12 mb-6">
                    <label for="name">用户名</label>
                    <input type="text" class="form-control" id="name" v-validate="validName" v-model="name">
                    <div class="invalid-feedback" v-if="error.name">
                        {{error.name}}
                    </div>
                </div>
            </div>
            <div class="form-row" :class="{top:!error.password}">
                <div class="col-md-12 mb-6">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" v-validate="validPassword"
                        v-model="password" @keyup.enter="Submit">
                    <div class="invalid-feedback" v-if="error.password">
                        {{error.password}}
                    </div>
                </div>
            </div>
            <button class="btn btn-primary form-control" type="button"
                :style="error.password?'margin-top:10px':'margin-top:15px'" @click="Submit">登录</button>
        </form>
    </template>
    <script>
        const { reactive, toRefs, ref } = Vue
        const app = Vue.createApp({
            template: '#myroot',
            setup() {
                let login = reactive({
                    name: '',
                    password: '',
                    //错误对象
                    error: {},
                    //错误提示信息
                    message: {
                        name: '请输入用户名',
                        password: '请输入密码',
                    },
                })
                const { error, message } = login
                //验证 返回的成功对象
                let succeess = {
                    code: 200,
                    bind: (id) => error[id] = ''
                }
                //验证 返回的错误对象
                let err = {
                    code: 201,
                    bind: (id) => error[id] = message[id]
                }
                //验证姓名
                let validName = (name) => {
                    if (!name) return err
                    else return succeess
                }
                //验证密码
                let validPassword = (password) => {
                    if (!password) return err
                    else return succeess
                }
                //登录提交
                let Submit = () => {
                    const { password, name } = login
                    if (name == 'admin' && password == '123456') alert('登录成功')
                    else alert('登录失败')
                }
                return {
                    ...toRefs(login),
                    validName,
                    validPassword,
                    Submit
                }
            }
        })
        //自定义指令
        app.directive('validate', {
            mounted(el, binding) {
                el.addEventListener('blur', function () {
                    el.className = ''//清空类名
                    let { value: regExp } = binding//拿到验证方法
                    const result = regExp(el.value)//调用验证方法 得到返回对象
                    if (result.code == 200) el.className = 'form-control is-valid'//成功后调用成功样式
                    else el.className = 'form-control is-invalid'//失败后调用失败样式
                    result.bind(el.id)//调用返回对象方法 更新error对象
                })
            },
        })
        app.mount('#app')
    </script>
</body>

</html>

青枙如初

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue实现登录页面的表单验证

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8' /> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <titl.
复制链接

扫一扫