基于Element-Plus插件实现
首先需要去官网配置“按需导入”功能
网址为:A Vue 3 UI Framework | Element Plus (element-plus.org)
基础表单校验
提交界面:
操作如下
示例:(注意下方针对agree配置的rule是自定义规则,)
import { ref } from 'vue'
// 表单数据对象
const userInfo = ref({
account: '1311111111',
password: '123456',
agree: true
})
// 规则数据对象
const rules = {
account: [
{ required: true, message: '用户名不能为空' }
],
password: [
{ required: true, message: '密码不能为空' },
{ min: 6, max: 24, message: '密码长度要求6-14个字符' }
],
agree: [
{
validator: (rule, val, callback) => {
return val ? callback() : new Error('请先同意协议')
}
}
]
}
html代码如下
<div class="form">
//第一步,在el-form上绑定表单(:model),绑定规则(:rules)
<el-form ref="formRef" :model="userInfo" :rules="rules" status-icon>
//第二步,在form-item上绑定规则(prop)
<el-form-item prop="account" label="账户">
//第三步,在输入框中实现双向绑定(用v-model)
<el-input v-model="userInfo.account" />
(下面如:上方的二、三步骤相同)
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input v-model="userInfo.password" />
</el-form-item>
<el-form-item prop="agree" label-width="22px">
<el-checkbox v-model="userInfo.agree" size="large">
我已同意隐私条款和服务条款
</el-checkbox>
</el-form-item>
<el-button size="large" class="subBtn" >点击登录</el-button>
</el-form>
</div>
注意为防止用户一开始就点击提交按钮,必须对按钮设置事件监听(作提交统一校验),监听上方表单内容是否符合规则
代码如下:
//获取表单组件实例 此处后续需用ref绑定el-form组件(上方的html代码未对el-form进行绑定)
const formRef = ref(null);
//此处为点击提交按钮后对应的事件操作
const submitForm=()=>{
//调用实例方法 ()
formRef.value.validate((valid) => {
//valid:表单中的所有项都通过校验,才为true
if (valid) {
//vaild为true则跳转到首页
router.push('/')
ElMessage.success('登录成功')
}
else {
ElMessage.error('登录失败')
}
})
}
以上即可基本完成对应表单提交的内容校验功能