表单校验-

1. 准备表单对象  与接口文档一致

// 表单数据对象
const userInfo = ref({
  account: '1311111111',
  password: '123456',
  agree: true
})

2. 准备规则对象 

// 规则数据对象
const rules = {
  account: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 14, message: '密码为 6-14 位的非空字符', trigger: 'blur' }
  ],
  agree: [
    {
      validator: (rule, value, callback) => {
        // console.log(value)
        // 校验规则
        if (value === true) {
          callback()
        } else {
          callback(new Error('请先勾选协议'))
        }
      }
    }
  ]
}

validator参数

rule:   这是与当前验证字段相关的规则对象。它可能包含该字段的多个验证规则和相关的元数据。

value:   这是需要验证的字段的值。在您的情况下，它可能是表单中的一个复选框（checkbox）的值，您正在检查这个值是否为 true。

callback:   这是一个回调函数  在校验成功或失败时均需要调用它  在成功时可直接调用  在失败时需要携带参数调用

3. 与表单元素绑定

  <div class="form">
            <el-form
              ref="formRef"
              :model="formModel"
              :rules="rules"
              label-position="right"
              label-width="60px"
              status-icon
            >
              <el-form-item label="账户" prop="account">
                <el-input v-model="formModel.account" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="formModel.password" />
              </el-form-item>
              <el-form-item prop="agree" label-width="22px">
                <el-checkbox v-model="formModel.agree" size="large">
                  我已同意隐私条款和服务条款
                </el-checkbox>
              </el-form-item>
              <el-button @click="doLogin" size="large" class="subBtn"
                >点击登录</el-button
              >
            </el-form>
          </div>

4. 点击登录统一校验

// 点击登录校验
const formRef = ref(null)
const router = useRouter()
// const { account, password } = formModel.value
const doLogin = () => {
  formRef.value.validate(async (valid) => {
    const { account, password } = formModel.value
    // valid: 所有表单都通过校验  才为true
    console.log(valid)
    // 以valid做为判断条件 如果通过校验才执行登录逻辑
    if (valid) {
      // console.log('校验通过')
      await userStore.getUserInfo({ account, password })
      ElMessage.success('登陆成功')
      router.replace({ path: '/' })
    }
  })
}

组件库表单自带校验方法validate(valid, fields)

valid：第一个参数为判断校验是否通过  所有校验均通过  valid为true

fields：第二个参数为校验的字段值  但是校验成功时好像拿不到值