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

大家都知道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>

大家可以去试试，效果如下所示：

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