elementui+vue2 input输入框限制只能输入数字

news2025/1/19 23:15:47

方法1

自定义表单校验

<el-form :model="Formdata" ref="formRef" :rules="nodeFormRules" label-width="100px">
	<el-form-item
	    label="年龄"
	    prop="age"
	  >
	    <el-input v-model.number="Formdata.age"></el-input>
	  </el-form-item>
</el-form>
data() {
	var checkNumber = (rule, value, callback) => {
	   // if (!value) {
	   //   return callback(new Error('年龄不能为空'));
	   // }
	   if (value && !Number.isInteger(value)) {
	     callback(new Error("请输入数字值"));
	   } else {
	     callback();
	   }
	 };
	 return{
	  nodeFormRules: {
        age: [{ validator: checkNumber, trigger: "blur" }],
      }
	}
}

方法2

只要给el-form标签加上proprules属性就可以了

<el-form :model="Formdata" ref="formRef" label-width="100px">
	<el-form-item
	    label="年龄"
	    prop="age"
	    :rules="[
	      { required: true, message: '年龄不能为空'},
	      { type: 'number', message: '年龄必须为数字值'}
	    ]"
	  >
	    <el-input v-model.number="Formdata.age"></el-input>
	  </el-form-item>
</el-form>

注意:
el-form标签的prop属性的值必须得和input框v-model绑定的值一致,否则校验无效

其他问题

一打开表单 还没开始输入数据 表单的校验就自动触发了
这就导致我的空表单出现了校验错误
在这里插入图片描述

解决

在表单页面mounted中 或者 打开表单页面之前 移除表单项的校验结果,即在对应位置加上如下代码:

this.$nextTick(() => {
  setTimeout(() => {
    this.$refs.formRef.clearValidate(); // 移除表单项的校验结果
  }, 10);
});

补充

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1339951.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ASUS华硕ROG幻16笔记本电脑2023款GU604VI VZ VY原装出厂Windows11系统22H2

华硕玩家国度幻16笔记本原厂W11系统&#xff0c;适用型号&#xff1a;GU604VI、GU604VZ、GU604VY 链接&#xff1a;https://pan.baidu.com/s/166x6FNUFEpA3Qbzeory3Hg?pwdlwau 提取码&#xff1a;lwau 系统自带所有驱动、出厂主题壁纸、Office办公软件、MyASUS华硕电脑管…

关于使用Selenium获取网页控制台的数据

背景&#xff1a; 需要获取网页的控制台的数据&#xff0c;如下图 在此文章将使用到 Pycharm 和 Selenium4 Pycharm安装 Selenium安装 from selenium import webdriver from selenium.webdriver.common.by import By import time# 创建浏览器对象 browser webdriver.Chro…

Oracle数据updater如何回滚

1.查询update语句执行的时间节点 &#xff1b; select t.FIRST_LOAD_TIME, t.SQL_TEXT from v$sqlarea t where to_char(t.FIRST_LOAD_TIME) > 2023-03-19/17:00:00 order by t.FIRST_LOAD_TIME desc;开启表的行迁移 alter table test enable row movement;3.回滚表数据到…

可运营的Leadshop开源商城小程序源码 +H5公众号+带视频教程

源码简介 Leadshop是一款出色的开源电商系统&#xff0c;具备轻量级、高性能的特点&#xff0c;并提供持续更新和迭代服务。该系统采用前后端分离架构&#xff08;uniappyii2.0&#xff09;&#xff0c;以实现最佳用户体验为目标。 前端部分采用了uni-app、ES6、Vue、Vuex、V…

CamSim相机模拟器:极大加速图像处理开发与验证过程

随着图像处理技术的不断发展&#xff0c;相机模拟在图像处理开发和验证中扮演着越来越重要的角色。相机模拟能够模拟真实相机的成像过程&#xff0c;提供高质量的图像输入&#xff0c;使开发人员能够更好地评估和调整图像处理算法。本文将探讨如何通过相机模拟来加速图像处理的…

2024年煤炭生产经营单位(安全生产管理人员)证考试题库及煤炭生产经营单位(安全生产管理人员)试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年煤炭生产经营单位&#xff08;安全生产管理人员&#xff09;证考试题库及煤炭生产经营单位&#xff08;安全生产管理人员&#xff09;试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种…

磁盘管理与文件系统

文章目录 磁盘管理与文件系统一、磁盘基础1、磁盘结构12、磁盘结构2 二、磁盘分区表示1、主引导记录&#xff08;MBR&#xff1a;Mast Boot Record&#xff09;2、磁盘分区表示3、文件系统类型 三、管理磁盘及分区1、检测并确认新硬盘fdisk命令①、查看或管理磁盘分区②、查看常…

如何开发员工管理软件app系统?

我们都知道&#xff0c;不同的业务有多种软件app小程序。但移动软件app小程序不仅可以为企业带来利润&#xff0c;也可以为工作场所的员工带来利润。 您知道小型企业和大型企业都可以从使用的移动软件app小程序中受益。这就是为什么按需软件app小程序开发的需求变得很高的原因…

工具系列:TimeGPT_(6)同时预测多个时间序列

TimeGPT提供了一个强大的多系列预测解决方案&#xff0c;它涉及同时分析多个数据系列&#xff0c;而不是单个系列。该工具可以使用广泛的系列进行微调&#xff0c;使您能够根据自己的特定需求或任务来定制模型。 # Import the colab_badge module from the nixtlats.utils pac…

内网穿透的应用-开源表格工具APITable本地部署结合内网穿透实现公网访问

文章目录 前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 前言 vika维格表作为新一代数据生产力平台&#xff0c;是一款面向 API 的智能多维表格。它将复杂的可视化数据库、电子表格、实时在线协同、低代码开发技术四合为一&am…

Windows 平台下安装与配置 MySQL 5.7.36

接上文&#xff0c; 配置 MySQL 服务 MySQL 安装完毕之后&#xff0c;需要对服务器进行配置。具体的配置步骤如下。 STEP 01&#xff1a; 在“MySQL安装完成窗口” 单击【Next】&#xff08;下一步&#xff09;按钮&#xff0c;进入服务器配置窗口&#xff0c;如图8所示。选择产…

2024年软考有电子证书吗?如何下载?

并非所有地区都设有软考电子证书制度&#xff0c;目前只有广东、浙江和山东实行了软考电子证书。至于打印时间&#xff0c;由于各地区规定不同&#xff0c;一般在合格标准公布后约一个月左右进行打印。 广东软考电子证书 盖有”广东省人力资源和社会保障厅专业技术人员资格考试…

什么是负载均衡?

负载均衡是指在计算机网络领域中&#xff0c;将客户端请求分配到多台服务器上以实现带宽资源共享、优化资源利用率和提高系统性能的技术。负载均衡可以帮助小云有效解决单个服务器容量不足或性能瓶颈的问题&#xff0c;小云通过平衡流量负载&#xff0c;使得多台服务器能够共同…

1. Spring概述

概述 Spring 是一个开源框架Spring 为简化企业级开发而生&#xff0c;使用 Spring&#xff0c;JavaBean 就可以实现很多以前要靠 EJB 才能实现的功能。同样的功能&#xff0c;在 EJB 中要通过繁琐的配置和复杂的代码才能够实现&#xff0c;而在 Spring 中却非常的优雅和简洁。…

53.网游逆向分析与插件开发-游戏反调试功能的实现-通过内核信息检测调试器

码云地址&#xff08;master分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;b44fddef016fc1587eda40ca7f112f02a8289504 代码下载地址&#xff0c;在 SRO_EX 目录下&#xff0c;文件名为&#xff1a;SRO_Ex-通过内核信息…

EasyExcel导出

1.简介 官网&#xff1a;EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 2.案例 2.1 实现的效果 效果图如下&#xff1a; 2.2 实现步骤 三种情景&#xff0c;主要是表头和数据有区别&#xff0c;简列实现步骤如下&#xff1a; 2.3 具体实现 2.3.1 前置-依赖导入…

探究element-ui 2.15.8中<el-input>的keydown事件无效问题

一、问题描述 今天看到一个问题&#xff0c;在用Vue2element-ui 2.15.8开发时&#xff0c;使用input组件绑定keydown事件没有任何效果。 <template><div id"app"><el-input v-model"content" placeholder"请输入" keydown&quo…

代码随想录算法训练营day1|704.二分查找、27.移除元素

第一章 数组 part01 今日任务 数组理论基础&#xff0c;704. 二分查找&#xff0c;27. 移除元素 详细布置 数组理论基础 文章链接&#xff1a;代码随想录 题目建议&#xff1a; 了解一下数组基础&#xff0c;以及数组的内存空间地址&#xff0c;数组也没那么简单。 704. 二…

记edusrc一处信息泄露登录统一平台

本文由掌控安全学院 - sbhglqy 投稿 目录 前言 测试思路 免费领取安全学习资料包&#xff01;​ 前言 我们都知道像大学之类的各种平台的登录账号基本上是学号&#xff0c;初始登录密码基本上是学生身份证的后6位再拼接上一些带有学校缩写的英文字母。所以我们在找漏洞的时…

HarmonyOS4.0开发应用(四)【ArkUI状态管理】

ArkUI状态管理 分为以下四个: StateProp和LinkProvide和ConsumeObserved和ObjectLink State 相当于vue中data()内定义的属性变量&#xff0c;相当于react中useState()的使用,即绑定在视图上的响应式变量&#xff0c;可动态更新~ Tip: 标记的变量必须初始化&#xff0c;不可为空…