快捷導航

關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式

更新時間：2020年09月08日 11:55:48 作者：胖次超人

這篇文章主要介紹了關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

我就廢話不多說了，大家還是直接看代碼吧~

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

補充知識：element form表單驗證（數(shù)字，手機號，郵箱）

我就廢話不多說了，大家還是直接看代碼吧~

<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')">立即創(chuàng)建</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('請輸入數(shù)字值'))
		  } 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: '年齡必須為數(shù)字值', 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>

效果如下：