关于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 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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合并两个数组的两种方式的异同
2012/09/14 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
讲解Python中的递归函数
2015/04/27 Python
机器学习python实战之手写数字识别
2017/11/01 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
10个Python小技巧你值得拥有
2018/09/29 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
公司聘任书模板
2014/03/29 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年学校工作总结
2014/11/20 职场文书
民事和解协议书格式
2014/11/29 职场文书
护士求职自荐信
2015/03/25 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android