首页 > 其他分享 >this.$refs[formName].validate((valid) =>{} 无效,vue验证表单无效

this.$refs[formName].validate((valid) =>{} 无效,vue验证表单无效

时间:2022-08-31 10:37:15浏览次数:78  
标签:vue refs value callback valid Error 无效 formName

问题:

this.$refs[formName].validate((valid) =>{} 无效的问题,当验证通过的时候点确定按钮没有报错,也没有任何反应。

背景:

ruoyi前后端分离新项目,前端vue。

解决:

参考:

this.$refs[formName].validate((valid) =>{} 无效 - 搬砖的苦行僧 - 博客园 (cnblogs.com)

每一个 if 都要对应了一个 else 并且每个条件 下 都要 callback 确保 在不同情况下 都会执行callback所以要在验证时加上else的callback(),具体可看下面的opMoney(在最后)

rules: {
        opMoney:[{ //如此代码块
            required: true,
            validator: (rule, value, callback) => {
              if(value == null) {
                callback(new Error('请输入操作金额')); //该函数如同return
              }
              if(isNaN(parseInt(value))) {
                 callback(new Error('请输入数字'));
              }
              if(value == 0) {
                callback(new Error('请输入操作金额'));
              }
              if(value < 0) {
                callback(new Error('请输入正数'));
              }
              callback(); //如果都没有问题,最后一定要加上此句
            },
            trigger: 'blur'
        }]
      },

 

标签:vue,refs,value,callback,valid,Error,无效,formName
From: https://www.cnblogs.com/sykfrt/p/16642085.html

相关文章

  • Vue + Elementui 实现登录页 手机验证码、倒计时等功能
    Vue+Elementui实现登录页手机验证码、倒计时等功能点击打开视频讲解更加详细<template><divid="app"><divclass="left">用代码改变世界</div><el-fo......
  • Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html会牵涉到template的用法、占位、实际不渲染到页面中1、默认插槽:1.1基本结构及介绍个人理解:在A......
  • Vue实现下载Excel文件的方法
    1.安装依赖包npminstall-Sfile-savernpminstall-Sxlsxnpminstall-Dscript-loader2.配置文件在项目目录中创建文件夹downloads,放入配置文件Export2Exce......
  • vue3源码学习2-创建和渲染vnode
    创建vnode我们在第一节中在packages/runtime-core/src/apiCreateApp.ts文件的createAppAPI方法中,app.mount()时://通过createVNode方法创建了根组件的vnodeconstvnod......
  • vue+element 的使用问题记录-下拉列表绑定值为整数
     vue+element的使用问题记录 1、下拉列表绑定值为整数问题现象:下拉列表没有显示对应的文字,显示的是数字。  解决方法:对应的对象的类中的数据类型是Integer......
  • Vue-条件渲染
    条件渲染条件渲染的属性有两个:1.v-if/v-elsev-if的方法是删除元素<body> <divid="app"> <divv-if="flag">上课</div> <divv-if="n">......
  • Vue-循环渲染
    循环渲染循环渲染使用的是v-for<body> <divid="app"> <divv-for="iteminarr">{{item}}</div> <divv-for="iteminarr2">{{item.time}}</div> <div......
  • Vue-样式绑定
    1.对class属性进行绑定<style> .app{ width:200px; height:200px; background-color:purple; } .app1{ width:100px; height:100px; bac......
  • vue3 基础-表单元素双向绑定
    通常是在form表单相关的场景中会用到双向绑定相关,核心是v-model的应用.input输入框<!DOCTYPEhtml><htmllang="en"><head><title>input</title><script......
  • Schema-validation: missing column [xxx_xxx] in table [xxx]
    数据库Mysql字段名为ClientIP,项目定义实体字段ClientIP通过@Column(name=“ClientIP”)来标识实体类中属性与数据表中字段的对应关系项目启动时发现报missingcolumn[cl......