element-ui 폼 에서 순수 숫자 입력 을 제한 하 는 해결 방식
3896 단어 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 폼 에서 순수 숫자 입력 을 제한 하 는 해결 방법 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
element-ui 대화상자 기반el-dialog 초기화 검사 문제 해결페이지를 새로 고치지 않고 el-dialog를 다시 열 때, rules나 어떤 값을 연결하려면required가 필요합니다. 자동으로 검사됩니다. 여러 개의 블로그를 살펴본 결과, 자주 사용하는 두 가지 해결 방법이 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.