表单校验规则
这里简单记录下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:所有表单都通过校验才为trueif (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:所有表单都通过校验才为trueif (valid) {// TODO: 登录逻辑}})
}
//这里的doLogin为登录按钮的点击事件