表单提交前校验

1.场景介绍

使用场景："学生" 表单在提交前校验填写人年龄是否大于0岁并小于等于25岁，如果年龄不在该范围内，则提示不可提交并取消提交操作。

2.效果展示

效果演示日期：2025-09-24

当年龄小于等于0岁时，提示"年龄非法，不可提交"；当年龄大于25岁时，提示"年龄大于25，不可提交"

3.操作步骤

3.1 创建 "学生" 表单

初始化 "学生" 数据库表，Mysql数据脚本如下：

  drop table if exists student_info;
  create table student_info (
      id varchar(255) not null comment '主键',
      name varchar(255) comment '姓名',
      sex varchar(255) comment '性别',
      birthday_address varchar(255) comment '出生地',
      birthday date comment '出生日期',
      idCard varchar(255) comment '身份证号',
      telephone varchar(255) comment '联系电话',
      remarks mediumtext comment '备注',
      primary key (id)
  ) comment='学生信息';

右键点击刚创建的 "学生" 实体，点击生成表单，将出生日期的组件类型改为 "日期选择" 组件

3.2 添加表单提交前事件

详细步骤如下：

1. 创建表单提交前事件，根据填写的出生日期和当前日期判断，小于等于0或者大于25弹出提示并返回false并保存。

let age = new Date().getFullYear() - new Date(this.formData.birthday).getFullYear()
if (age <= 0) {
  this.$fail('年龄非法，不可提交')
  return false
}
if (age > 25) {
  this.$fail('年龄大于25，不可提交')
  return false
}

2.点击预览，填写出生日期距今大于25或小于等于0时，点击保存即可看到提示效果，并且没有触发保存操作。