vue页面表单提交时如何做校验

本文介绍了如何在Vue应用中实现表单的必填校验,包括给form表单绑定rules校验规则,设置prop属性,以及使用正则表达式进行特定字段的格式验证。通过实例演示了校验规则的编写和整体提交表单的验证过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们在做新增的时候,新增对话框是要加必填校验的,否则就可能会加空数据或者会产生sql的报错。那么这个校验是如何加的呢?下面我们来说一下。

最终效果:给这些都加上必填校验,如果没有填,不让提交添加请求,且给出提示。

没有加校验的:
在这里插入图片描述
加了校验的:
已经加了校验的字段前面都会有一个红点,且不符合要求时会弹出红字提示
在这里插入图片描述

一、必填校验

步骤:

1.1 给form表单绑定一个:rules校验规则,给每个item加上一个prop属性。

prop属性名称自定义,一般跟v-model的属性名称一样即可。
在这里插入图片描述

1.2 在data中创建rules校验规则

这个名称跟我们上面:rules=rules,等号后面的名称是一致的
在这里插入图片描述

1.3 填写具体的校验规则

这里我们给学生姓名加上必填校验
在这里插入图片描述

        studentName:[
          {required:true,message:"学生姓名不能为空",trigger:"blur"}
        ],

这里对这些属性做一些说明:
studentName 是需要验证的表单字段名。

required 是验证规则之一,意思是该字段必须填写,否则会提示错误。

message 是当验证不通过时需要显示的错误提示信息。

trigger 是该规则触发验证的方式。在这个例子里,trigger 为 blur,表示在字段失去焦点时触发验证,也可以设置为 change 表示在字段值变化时触发验证。

这些属性的组合意味着对 studentName 这一表单字段进行了非空验证,当该字段为空时,会在失去焦点时弹出错误提示 “学生姓名不能为空”。

1.4 点击确定提交表单时对表单进行整体校验

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log("校验通过")
        }else{
          console.log("校验不通过")
        }
      });
    },

在这个方法中,使用了 this.$refs["form"].validate 来触发表单的校验操作。该方法接受一个回调函数作为参数,在校验完成后会调用这个回调函数,并传入一个布尔值 valid,表示表单是否通过了校验。

如果 valid 为 true,则打印"校验通过";如果 valid 为 false,则打印"校验不通过"。
换句话说,这段代码会在表单校验完成后,根据校验结果输出相应的信息,以便进行进一步的处理或反馈给用户。

注意:如果不写 this.$refs["form"].validate,校验是不生效的。

也就是说上面写的校验就只有个文字提示的功能,而不是对表单提交进行校验了。
在这里插入图片描述

二、正则校验

我们看到,新增时需要输入学生成绩,这时候我们需要要求用户输入时,
首先是必填,其次还必须输入数字,且范围在0~150分之间。
这个要求可以用正则表达式来进行校验限制输入类型为数字且范围在0~150。
写法如下:
在这里插入图片描述

        chineseScore: [
          { required: true, message: '语文分数不能为空', trigger: 'blur' },
          { pattern: /^(?:0|[1-9]\d?|1[0-4]\d|150)$/, message: '请输入有效的语文分数(0-150)', trigger: 'blur' }
        ],
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丿BAIKAL巛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值