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 폼 에서 순수 숫자 입력 을 제한 하 는 해결 방법 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.