关于element-ui表单中限制输入纯数字的解决方式


Posted in Javascript onSeptember 08, 2020

我就废话不多说了,大家还是直接看代码吧~

<input type="text" class="el-input__inner"    
    oninput = "value=value.replace(/[^\d]/g,'')"
    >

补充知识:element form表单验证(数字,手机号,邮箱)

我就废话不多说了,大家还是直接看代码吧~

<template>
 <div class="hello">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			 <el-form-item label="名称" prop="name">
			 <el-input v-model="ruleForm.name"></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 label="手机号" prop="phone">
			 <el-input v-model.number="ruleForm.phone"></el-input>
			 </el-form-item>
			 
			 <el-form-item label="邮箱" prop="email">
			 <el-input v-model="ruleForm.email"></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>
			
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 props: {
 
 },
 data() {
 
		// 手机号验证
		var checkPhone = (rule, value, callback) => {
		 const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
		 if (!value) {
		  return callback(new Error('电话号码不能为空'))
		 }
		 setTimeout(() => {
		  
		  if (!Number.isInteger(+value)) {
		  callback(new Error('请输入数字值'))
		  } else {
		  if (phoneReg.test(value)) {
		   callback()
		  } else {
		   callback(new Error('电话号码格式不正确'))
		  }
		  }
		 }, 100)
		 };
		 
  return {
  ruleForm: {
   name: '',
   phone: '',
   email: '',
   age:''
  },
  rules: {
   name: [
   { required: true, message: '请输入姓名', trigger: 'blur' },
   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
   ],
   age: [
   { required: true, message: '请输入年龄', trigger: 'blur' },
   { type: 'number', message: '年龄必须为数字值', trigger: 'blur' },
   ],
   phone: [
   {required: true, validator: checkPhone, trigger: 'blur' }
   ],
   email: [
   { required: true, message: '请输入邮箱地址', trigger: 'blur' },
			{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
   ]
   
  }
  };
 },
 methods: {
  submitForm(formName) {
  this.$refs[formName].validate((valid) => {
   if (valid) {
   alert('submit!');
   } else {
   console.log('error!!');
   return false;
   }
  });
  },
  resetForm(formName) {
  this.$refs[formName].resetFields();
  }
 }
}
</script> 
 
<style scoped lang="scss"> 
</style>

效果如下:

关于element-ui表单中限制输入纯数字的解决方式

以上这篇关于element-ui表单中限制输入纯数字的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得父标签
Nov 14 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
快速解决element的autofocus失效问题
Sep 08 #Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 #Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 #Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 #Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 #Javascript
基于postman获取动态数据过程详解
Sep 08 #Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 #Javascript
You might like
php链表用法实例分析
2015/07/09 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
JS实现随机点名器
2020/04/12 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
numpy中的高维数组转置实例
2018/04/17 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Django中create和save方法的不同
2019/08/13 Python
Python 切分数组实例解析
2019/11/07 Python
Python telnet登陆功能实现代码
2020/04/16 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
开工仪式主持词
2014/03/20 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记