Element-Plus如何实现表单校验和表单重置

一：页面布局介绍： 

这是我刚刚用基于vue3+element-plus写好的一个部门管理的页面

 基本的增删改查已经写好，下面我只提供页面的template和style的代码：

template

style部分：

二：表单校验：

通过测试我们发现，在添加部门的时候，我不在输入框里面输入内容也是可以成功添加部门数据的，这显得就不太友好。

我直接点击确定：近发现数据已经添加成功了，这就有点不符合逻辑了。

开始表单校验：

• 1，定义表单校验规则 绑定到form表单
• 2，把规则绑定到form表单中
• 3，定义表单组件的引用
• 4，检验表单

定义表单校验实例：

完整规则代码：

//定义表单校验的规则  //FormRules 是element给我们提供的,可以给我们提示
const rules = ref({
  name:[
    {required:true,message:'部门名称不能为空',trigger:'blur'},
    {min:1,max:10,message:'部门名称必须 2 - 10位',trigger:'blur'}
  ]
})

规则绑定到表单中：

 

代码：

看看效果：

 可以发现我们定义的校验规则已经生效了

但是规则虽然生效了，我们还是可以提交表单数据。 

我们因该在表单校验不通过的时候，阻止表单提交。

定义表单组件的引用：

代码：

//定义表单组件的引用  FormInstance 表单实例 是element给我们提供的
const deptFormRef = ref()

 把这个表单组件的引用，绑定到我们自己的表单中。

代码：

在添加dialog弹窗里面，点击保存的时候，我们因该先判断表单校验是否通过，才能往下执行。

代码：

//确认保存
const save = async () =>{
 //先表单校验 
  await deptFormRef.value?.validate().catch(err =>{
    ElMessage.error('表单校验的失败')
    throw err   //throw err  //下面正常的代码就不会执行了，回抛出异常
  })
   
  //正式向后端发送请求
  let result 
  //判断是添加还是修改
  if(dialogTitle.value == '新增部门'){
    //添加的请求
    result = await insertDeptApi(deptForm.value)
  }else{
    //修改的请求
    result = await updateDeptApi(deptForm.value)
  }
    if(result.code){
        ElMessage.success('操作成功')
    }else{
      ElMessage.error('操作失败')
    }
    //关闭弹窗
    dialogForValue.value = false
    //重新查询
    search()
}

测试：

可以看到表单校验成功了

控制台报错：

不想提示报错还有另一种方式：

代码：

//确认保存
const save = async () =>{
 //先表单校验 
  await deptFormRef.value?.validate().catch(err =>{
    ElMessage.error('表单校验的失败')
    //throw err   //throw err  //下面正常的代码就不会执行了，回抛出异常
    return new Promise(() => {}) //不想抛错可以这样，promise是待定状态，也不会往下执行
  })
   
  //正式向后端发送请求
  let result 
  //判断是添加还是修改
  if(dialogTitle.value == '新增部门'){
    //添加的请求
    result = await insertDeptApi(deptForm.value)
  }else{
    //修改的请求
    result = await updateDeptApi(deptForm.value)
  }
    if(result.code){
        ElMessage.success('操作成功')
    }else{
      ElMessage.error('操作失败')
    }
    //关闭弹窗
    dialogForValue.value = false
    //重新查询
    search()
}

测试：

三：表单重置：

上面我们的表单校验已经成功了，但是我们会发现一个缺点就是，表单校验失败的提示信息一直都在。

我先把错误信息显示出来之后，然后关闭dialog弹窗，接着我在打开dialog弹窗，发现错误信息依然在。

定义表单重置的方法：

form是一会调用方法，传递过来的表单实例参数，就是一个变量名。后面的 FormInstance和undefined就是一个泛型。

代码：

//表单重置
const resetForm = (form : FormInstance | undefined) =>{
  if(!form) return
  form.resetFields()
}

在点击新增部门和修改部门的方法时，调用重置表单的方法。

代码：

  
       新增部门
  

代码：

测试：

在测试一个错误的，然后退出，重新打开看效果。

 成功