vue3 - element-plus表单验证?

Question

下面这段代码来自于element-plus官网，有几点我不明白。

1.这里为什么用setTimeout？有必要吗？它是在失焦的时候才会触发验证

const checkAge = (rule: any, value: any, callback: any) => {  if (!value) {    return callback(new Error('Please input the age'))  }  setTimeout(() => {    if (!Number.isInteger(value)) {      callback(new Error('Please input digits'))    } else {      if (value < 18) {        callback(new Error('Age must be greater than 18'))      } else {        callback()      }    }  }, 1000)}

2.这里的ruleFormRef.value.validateField('checkPass')有必要吗？在失焦之后，checkpass字段不也会触发验证吗？如果设置change时校验，这还是有用的。

const validatePass = (rule: any, value: any, callback: any) => {  if (value === '') {    callback(new Error('Please input the password'))  } else {    if (ruleForm.checkPass !== '') {      if (!ruleFormRef.value) return      ruleFormRef.value.validateField('checkPass')    }    callback()  }}

3.这里的rules有必要为响应式数据吗?

const rules = reactive<FormRules<typeof ruleForm>>({  pass: [{ validator: validatePass, trigger: 'blur' }],  checkPass: [{ validator: validatePass2, trigger: 'blur' }],  age: [{ validator: checkAge, trigger: 'blur' }],})

全部代码:

<template>  <el-form    ref="ruleFormRef"    style="max-width: 600px"    :model="ruleForm"    status-icon    :rules="rules"    label-width="auto"    class="demo-ruleForm"  >    <el-form-item label="Password" prop="pass">      <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />    </el-form-item>    <el-form-item label="Confirm" prop="checkPass">      <el-input        v-model="ruleForm.checkPass"        type="password"        autocomplete="off"      />    </el-form-item>    <el-form-item label="Age" prop="age">      <el-input v-model.number="ruleForm.age" />    </el-form-item>    <el-form-item>      <el-button type="primary" @click="submitForm(ruleFormRef)">        Submit      </el-button>      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>    </el-form-item>  </el-form></template><script lang="ts" setup>import { reactive, ref } from 'vue'import type { FormInstance, FormRules } from 'element-plus'const ruleFormRef = ref<FormInstance>()const checkAge = (rule: any, value: any, callback: any) => {  if (!value) {    return callback(new Error('Please input the age'))  }  setTimeout(() => {    if (!Number.isInteger(value)) {      callback(new Error('Please input digits'))    } else {      if (value < 18) {        callback(new Error('Age must be greater than 18'))      } else {        callback()      }    }  }, 1000)}const validatePass = (rule: any, value: any, callback: any) => {  if (value === '') {    callback(new Error('Please input the password'))  } else {    if (ruleForm.checkPass !== '') {      if (!ruleFormRef.value) return      ruleFormRef.value.validateField('checkPass')    }    callback()  }}const validatePass2 = (rule: any, value: any, callback: any) => {  if (value === '') {    callback(new Error('Please input the password again'))  } else if (value !== ruleForm.pass) {    callback(new Error("Two inputs don't match!"))  } else {    callback()  }}const ruleForm = reactive({  pass: '',  checkPass: '',  age: '',})const rules = reactive<FormRules<typeof ruleForm>>({  pass: [{ validator: validatePass, trigger: 'blur' }],  checkPass: [{ validator: validatePass2, trigger: 'blur' }],  age: [{ validator: checkAge, trigger: 'blur' }],})const submitForm = (formEl: FormInstance | undefined) => {  if (!formEl) return  formEl.validate((valid) => {    if (valid) {      console.log('submit!')    } else {      console.log('error submit!')    }  })}const resetForm = (formEl: FormInstance | undefined) => {  if (!formEl) return  formEl.resetFields()}</script>

Answer 1

案例的作用是让你知道有哪些用法，真正使用中需要结合自己的业务去做改变，单独的一段代码问合不合适、有没有必要没有意义。

1、这里的setTimeout应该是模拟异步请求，告诉使用者callback可以延迟返回。他下面的TIP也推荐了一种async-validator
2、validatePass是校验Password密码的，里面ruleFormRef.value.validateField('checkPass')是校验Confirm确认密码的，适用的业务场景是，在密码修改完成后，重新校验确认密码与密码是否符合校验规则，比如是否一致
3、rules可以不是响应式，有没有必要看具体业务