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

 更新时间:2020年09月08日 11:55:48   作者:胖次超人  
这篇文章主要介绍了关于element-ui表单中限制输入纯数字的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

 <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表单中限制输入纯数字的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决ant Design中this.props.form.validateFields未执行的问题

    解决ant Design中this.props.form.validateFields未执行的问题

    这篇文章主要介绍了解决ant Design中this.props.form.validateFields未执行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue3使用el-upload上传文件示例详解

    vue3使用el-upload上传文件示例详解

    这篇文章主要为大家介绍了vue3使用el-upload上传文件实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 关于Vue中axios的封装实例详解

    关于Vue中axios的封装实例详解

    这篇文章主要给大家介绍了关于Vue中axios的封装的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-10-10
  • element 结合vue 在表单验证时有值却提示错误的解决办法

    element 结合vue 在表单验证时有值却提示错误的解决办法

    这篇文章主要介绍了element 结合vue 在表单验证下,有值却提示错误的解决办法,需要的朋友可以参考下
    2018-01-01
  • Vue中使用Element UI的Table组件实现嵌套表格功能

    Vue中使用Element UI的Table组件实现嵌套表格功能

    这篇文章主要介绍了Vue中使用Element UI的Table组件实现嵌套表格功能,演示如何在Vue中使用Element UI的Table组件实现嵌套表格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 如何为vuex实现带参数的 getter和state.commit

    如何为vuex实现带参数的 getter和state.commit

    这篇文章主要介绍了如何为vuex实现带参数的getter和state.commit,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • VNode虚拟节点实例简析

    VNode虚拟节点实例简析

    这篇文章主要介绍了VNode虚拟节点,结合实例形式分析了VNode虚拟节点的基本功能、原理与实现方法,需要的朋友可以参考下
    2023-06-06
  • VUE前端实现token的无感刷新3种方案(refresh_token)

    VUE前端实现token的无感刷新3种方案(refresh_token)

    这篇文章主要给大家介绍了关于VUE前端实现token的无感刷新3种方案(refresh_token)的相关资料,为了提供更好的用户体验,我们可以通过实现Token的无感刷新机制来避免用户在使用过程中的中断,需要的朋友可以参考下
    2023-11-11
  • vue前端实现打印下载示例详解

    vue前端实现打印下载示例详解

    这篇文章主要为大家介绍了vue前端实现打印下载示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue实现在data里引入相对路径

    vue实现在data里引入相对路径

    这篇文章主要介绍了vue实现在data里引入相对路径,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06

最新评论