使用 vue3 + element plus
步骤一：引入 element plus 框架
先 npm 安装
在 src/main.js 中引入
import ElementPlus from 'element-plus'
import "element-plus/dist/index.css"
app.use(ElementPlus)
步骤二：使用 element plus 的 form
可以拷贝官网：https://element-plus.org/zh-CN/component/form.html
步骤三：form 明确指定 rules
<el-form :model="formData" label-width="90px" :rules="rules">
<el-form-item label="用户" prop="account">
<el-input placeholder="输入账号" />
</el-form-item>
</el-form>
这个 rules 是组件中 js 赋过来的，prop 表示用在了 rules 中，比如这个 account，表示规则对应的是哪个 prop
const rules = {
account: [{
required: true,
message: "用户名不能为空",
}]
}
步骤四：事件触发校验
比如点击登录按钮触发 login 函数执行文章来源：https://www.toymoban.com/news/detail-524148.html
<el-form>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
<script setup>
import {reactive, ref} from "vue"
const formDataRef = ref()
const login = () => {
// 先校验表单
formDataRef.value.validate((valid) => {
if (!valid) {
return
}
})
}
</script>
最后我们什么都不输入点击登录能看到：
文章来源地址https://www.toymoban.com/news/detail-524148.html
到了这里，关于代码模版-element plus如何进行前端校验输入框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
