这里简单记录下vue使用表单时候，给表单添加校验规则，直接上代码
<script setup>
import { ref } from 'vue'
// 定义表单对象
const form = ref({
account: '',
password: '',
agree: true
})
// 定义表单验证规则
const rules = {
account: [
{required: true, message: '用户名不能为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不能为空', trigger: 'blur'},
{min: 6, max: 16, message: '密码长度为6-16位', trigger: 'blur'}
],
agree: [
{
validator: (rule, value, callback) => {
console.log(value)
if (value){
callback()
}
else {
callback(new Error('请同意隐私条款和服务条款'))
}
}
}
]
}
// 定义表单提交函数
const formRef = ref()
// 表单提交点击事件
const doLogin = () => {
formRef.value.validate((valid) => {
console.log(valid)
// valid:所有表单都通过校验才为true
if (valid) {
// TODO: 登录逻辑
}
})
}
</script>
<template>
<div>
<section class="login-section">
<div class="wrapper">
<nav>
<a href="javascript:;">账户登录</a>
</nav>
<div class="account-box">
<div class="form">
<el-form :model="form" :rules="rules" label-position="right" label-width="60px" status-icon>
<el-form-item prop="account" label="账户">
<el-input v-model="form.account" />
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input v-model="form.password" />
</el-form-item>
<el-form-item prop="agree" label-width="22px">
<el-checkbox v-model="form.agree" size="large" >
我已同意隐私条款和服务条款
</el-checkbox>
</el-form-item>
<el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>
</el-form>
</div>
</div>
</div>
</section>
</div>
</template>
- 首先定义表单对象，并通过 :model=“form” 来绑定对象，这里表示将<el-form组件内部的数据模型绑定到前面定义的form对象，通过这种方式，表单字段的值会与form对象中的相应属性进行双向绑定，确保用户在输入框中的值能够实时更新到form对象中。
- ：rules也是一个属性绑定，用于指定表单的校验规则
- el-form-item 中的prop属性用于指定对应rules校验规则中的哪个规则，例如这里的prop="account"就对应rules中的account规则校验。
- v-model= form.account用于指定与form表单中的哪个字段对应。
- 当需要自定义校验规则时候，可以通过validator的方式来实现，例如这里定义的agree检验规则。callback用于通知表单的验证结果，当满足校验规则时候调用callback表示验证通过，当未通过时候调用callback(new Error(…))，表示验证失败，并可以传递一个错误信息给表单框架，以便于向用户显示相应的提示。callback是必需的。因为表单框架依赖这个回调函数来决定验证是否通过。如果没有指定，表单框架将无法判断验证的结果，从而可能导致表单提交的逻辑出现问题。
问题
以上校验的实际都是blue，即失去焦点时，但是若用户已进入页面就点登录按钮，就不会出发blur时间，定义的校验规则也就不会生效，因此需要给点击登录按钮添加一个点击时间，点击后主动去校验所有规则。
添加代码
// 定义表单提交函数
const formRef = ref()
// 表单提交点击事件
const doLogin = () => {
formRef.value.validate((valid) => {
console.log(valid)
// valid:所有表单都通过校验才为true
if (valid) {
// TODO: 登录逻辑
}
})
}
//这里的doLogin为登录按钮的点击事件
