×

vue3+elemen-plus:不使用typescript实现简单的表单验证功能

作者:Terry2023.03.30来源:Web前端之家浏览:5549评论:0
关键词:vue3element-plus

大家都知道vue3已经发布有一段时间了,大家需要赶紧学习啦,这个是趋向,今天我们分享一个简单的应用:vue3+elemen-plus:简单的表单验证功能(不使用官方的ts)。

大家可以在官方的文档里可以看到验证代码,但是对于不懂typescript的人来说,就不太好使,那如何不用typescript去写这个验证功能呢?

我们用具体的实例说明吧。

HTML代码

<template>
    <div class="cen-pubbox">
        <div class="login-box">
            <div class="login-topinfo"><i></i>XXX停车管理系统</div>
        </div>
        <div class="screen-wid">
            <div class="login-formbox">
                <h1 class="login-title">您好,欢迎使用XXX停车管理系统</h1>
                <div class="login-bgbox">
                    <div class="login-img"></div>
                    <div class="login-form">
                        <h2>用户登录</h2>
                        <el-form :model="loginform" :rules="rules" ref="ruleFormRef" class="loginform" status-icon>
                            <el-form-item label="" prop="username">
                                <el-input v-model="loginform.username" placeholder="请输入账号" class="inp-fon"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="userpwd">
                                <el-input type="password" v-model="loginform.userpwd" placeholder="请输入密码" class="inp-fon"></el-input>
                            </el-form-item>
                            <el-form-item :span="24">
                                <el-button type="primary" @click="submitForm(rulesFormRef)">立即登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

JS代码

<script setup>
    import { reactive,ref } from "vue";
    // import { FormRules } from "element-plus";
    // const formSize = ref('default')
   
    const ruleFormRef = ref(null);
    const loginform = reactive ({
        username:'',
        userpwd:''
    })
    // const submitForm = () => {
    //     console.log('Submit!');
    // }
    const rules = reactive({
        username:[
            { required: true, message: '请输入正确的用户名', trigger: 'blur' },
            { min: 3, max: 20, message: '请输入3-20个字节', trigger: 'blur' },
        ],        
        userpwd:[
            { required: true, message: '请输入正确的密码', trigger: 'blur'},
            { min: 3, max: 20, message: '密码需要3~20个字符', trigger: 'blur'},
        ]
    })

    const submitForm = async () => {
        if (!ruleFormRef) return;
        ruleFormRef.value.validate((valid) => {
            if (valid) {
                console.log("submit!");
            } else {
                return false;
            }
        });

    }
   
</script>

大家可以去试试,效果如下所示:

image.png

好吧,是不是很简单呢,对你有效果就收藏吧。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vue3tselementui.html

网友评论文明上网理性发言 已有0人参与

发表评论: