vue3+ElementPlus 表单校验

原创

流年Felix

发布于 2023-08-15 16:18:19

9910

发布于 2023-08-15 16:18:19

1 使用v-model数据双向绑定、prop绑定表单项得属性、:rules绑定表单的校验规则

<el-form :model="userParams" :rules="rules" ref="formRef">
        <el-form-item label="用户姓名" prop="username">
          <el-input
            v-model="userParams.username"
            placeholder="请输入用户姓名"
          />
        </el-form-item>
        <el-form-item label="用户昵称" prop="name">
          <el-input v-model="userParams.name" placeholder="请输入用户昵称" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            v-model="userParams.password"
            placeholder="请输入用户密码"/>
</el-form-item>


let userParams = reactive({
  username: '',
  name: '',
  password: '',
})

2 定义rules的规则和对应的方法:

//校验用户名字回调函数
const validatorUsername = (rule: any, value: any, callBack: any) => {
  //用户名字|昵称,长度至少五位
  if (value.trim().length >= 5) {
    callBack()
  } else {
    callBack(new Error('用户名字至少五位'))
  }
}
//校验用户名字回调函数
const validatorname = (rule: any, value: any, callBack: any) => {
  //用户名字|昵称,长度至少五位
  if (value.trim().length >= 5) {
    callBack()
  } else {
    callBack(new Error('用户昵称至少五位'))
  }
}
const validatorPassword = (rule: any, value: any, callBack: any) => {
  //用户名字|昵称,长度至少五位
  if (value.trim().length >= 6) {
    callBack()
  } else {
    callBack(new Error('用户密码至少六位'))
  }
}
//表单校验的规则对象
const rules = {
  //用户名字
  username: [{ required: true, trigger: 'blur', validator: validatorUsername }],
  //用户昵称
  name: [{ required: true, trigger: 'blur', validator: validatorname }],
  //用户的密码
  password: [{ required: true, trigger: 'blur', validator: validatorPassword }],
}

3 在表单提交方法中可以使用表单校验，如果表单输入的内容校验不通过，将不会掉用保存接口:

const save = async () => {
  //只有表单校验✅通过后，才会执行reqAddOrUpdateUser方法
  await formRef.value.validate()
  const result = await reqAddOrUpdateUser(userParams)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: userParams.id ? '更新成功' : '新增成功',
    })
    showDrawer.value = false
  }
}