element-plus中，表单校验的使用

news2025/4/9 5:17:45

一.案例1：给下面的表单添加校验

1.目的要求

2.步骤

①给需要校验的el-form-item项，添加prop属性

②定义一个表单校验对象，里面存放了每一个prop的检验规则

③给el-form组件，添加:rules属性

④给el-form组件，添加ref属性，以便后面获取表单实例

⑤在代码中，定义该表单实例

⑥点击【确认添加】按钮时，通过表单实例查看表单是否符合校验规则。如果符合，则向后端发送请求；如果不符合，则不发送请求并提示相关信息

3.效果展示

4.注意事项

5.结合已写好的后端接口，展示整体效果

二.上述例子存在的问题

1.当取消对话框后，再打开对话框，表单的校验状态依然存在

2.对于上述案例的金额一项，校验不充分

结语

一.案例1：给下面的表单添加校验

1.目的要求

2.步骤

①给需要校验的el-form-item项，添加prop属性

②定义一个表单校验对象，里面存放了每一个prop的检验规则

//表单检验规则  
const rules = ref(
  {
    name: [
      { required: true, message: '请输入医技项目名称', trigger: 'blur' },//类型为输入框时，触发校验的时机应该是blur：失去焦点
    ],
    unit: [
      { required: true, message: '请选择单位', trigger: 'change' },//类型为选择框时，触发校验的时机应该是change:选项改变
    ],
    price: [
      { required: true, message: '请输入单价', trigger: 'blur' },
    ],
    expTypeId: [
      { required: true, message: '请选择费用类型', trigger: 'change' },
    ],
    deptId: [
      { required: true, message: '请选择执行科室', trigger: 'change' },
    ],
    recordType: [
      { required: true, message: '请选择项目类型', trigger: 'change' },

    ],
  }
)

③给el-form组件，添加:rules属性

④给el-form组件，添加ref属性，以便后面获取表单实例

⑤在代码中，定义该表单实例

//获取表单组件的引用
const itemDtoRef = ref();//该变量名必须等于el-form的ref属性值，才能获取到表单实例。

⑥点击【确认添加】按钮时，通过表单实例查看表单是否符合校验规则。如果符合，则向后端发送请求；如果不符合，则不发送请求并提示相关信息

3.效果展示

校验没通过时：

校验通过时：

4.注意事项

①prop如何命名？【十分重要】

el-form-item的prop属性，应当依据要提交的对象来决定，如下：

②表单实例（即表单的ref属性值对应的对象，此处为itemDtoRef ）有很多方法，如下：

5.结合已写好的后端接口，展示整体效果

将后端逻辑相关代码，添加到下面的地方：

展示完整效果：

二.上述例子存在的问题

1.当取消对话框后，再打开对话框，表单的校验状态依然存在

问题如下：

解决方案：在对话框的关闭事件中，使用表单实例的clearValidate方法，将表单的校验状态清空即可。如下：

展示改进后的效果：

2.对于上述案例的金额一项，校验不充分

问题描述：对于上述案例中，我们只校验了【单价】是否为空，显然这是不充分的，而是还需要验证单价：是否是数字、不能是负数、不能以0开头、最多有两位小数。

实现步骤：

①自定义【单价】的校验规则

//自定义校验规则(校验【单价】)
const validateAmount = (rule, value, callback) => {
  if (value === '' || value === undefined || value === null) {
    callback(new Error('金额不能为空'));
    return;
  }
  // 校验是否为数字
  if (isNaN(value)) {
    callback(new Error('金额必须为数字'));
    return;
  }
  // 校验是否为负数
  if (Number(value) < 0) {
    callback(new Error('金额不能为负数'));
    return;
  }
  // 校验是否以 0 开头（除非金额为 0）
  if (value !== '0' && value.startsWith('0')) {
    callback(new Error('金额不能以 0 开头'));
    return;
  }
  // 校验小数位数（如最多 2 位小数）
  const decimalPart = value.toString().split('.')[1];
  if (decimalPart && decimalPart.length > 2) {
    callback(new Error('金额最多保留 2 位小数'));
    return;
  }
  // 校验通过
  callback();
};

②将上述【单价】的自定义校验规则，添加到表单校验规则rules中的单价属性中。