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

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

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

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

HTML代码

1. <template>
2.     <div class=“cen-pubbox”>
3.         <div class=“login-box”>
4.             <div class=“login-topinfo”><i></i>XXX停车管理系统</div>
5.         </div>
6.         <div class=“screen-wid”>
7.             <div class=“login-formbox”>
8.                 <h1 class=“login-title”>您好，欢迎使用XXX停车管理系统</h1>
9.                 <div class=“login-bgbox”>
10.                     <div class=“login-img”></div>
11.                     <div class=“login-form”>
12.                         <h2>用户登录</h2>
13.                         <el-form :model=“loginform” :rules=“rules” ref=“ruleFormRef” class=“loginform” status-icon>
14.                             <el-form-item label=“” prop=“username”>
15.                                 <el-input v-model=“loginform.username” placeholder=“请输入账号” class=“inp-fon”></el-input>
16.                             </el-form-item>
17.                             <el-form-item label=“” prop=“userpwd”>
18.                                 <el-input type=“password” v-model=“loginform.userpwd” placeholder=“请输入密码” class=“inp-fon”></el-input>
19.                             </el-form-item>
20.                             <el-form-item :span=“24”>
21.                                 <el-button type=“primary” @click=“submitForm(rulesFormRef)”>立即登录</el-button>
22.                             </el-form-item>
23.                         </el-form>
24.                     </div>
25.                 </div>
26.             </div>
27.         </div>
28.     </div>
29. </template>

JS代码

1. <script setup>
2.     import { reactive,ref } from “vue”;
3.     // import { FormRules } from “element-plus”;
4.     // const formSize = ref(‘default’)
5.    
6.     const ruleFormRef = ref(null);
7.     const loginform = reactive ({
8.         username:”,
9.         userpwd:”
10.     })
11.     // const submitForm = () => {
12.     //     console.log(‘Submit!’);
13.     // }
14.     const rules = reactive({
15.         username:[
16.             { required: true, message: ‘请输入正确的用户名’, trigger: ‘blur’ },
17.             { min: 3, max: 20, message: ‘请输入3-20个字节’, trigger: ‘blur’ },
18.         ],        
19.         userpwd:[
20.             { required: true, message: ‘请输入正确的密码’, trigger: ‘blur’},
21.             { min: 3, max: 20, message: ‘密码需要3~20个字符’, trigger: ‘blur’},
22.         ]
23.     })
24.  
25.     const submitForm = async () => {
26.         if (!ruleFormRef) return;
27.         ruleFormRef.value.validate((valid) => {
28.             if (valid) {
29.                 console.log(“submit!”);
30.             } else {
31.                 return false;
32.             }
33.         });
34.  
35.     }
36.    
37. </script>

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

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