表单校验规则

这里简单记录下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>

1. 首先定义表单对象，并通过 :model=“form” 来绑定对象，这里表示将<el-form组件内部的数据模型绑定到前面定义的form对象，通过这种方式，表单字段的值会与form对象中的相应属性进行双向绑定，确保用户在输入框中的值能够实时更新到form对象中。
2. ：rules也是一个属性绑定，用于指定表单的校验规则
3. el-form-item 中的prop属性用于指定对应rules校验规则中的哪个规则，例如这里的prop="account"就对应rules中的account规则校验。
4. v-model= form.account用于指定与form表单中的哪个字段对应。
5. 当需要自定义校验规则时候，可以通过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为登录按钮的点击事件