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

目录

一.案例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中的单价属性中。

效果展示：

结语

以上就是表单校验的基本流程介绍，还算比较详细。

若有不懂的地方，可以私信博主（有空就会回复ou）。

喜欢本篇文章的话，可以留个免费的关注~~