溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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>效果如下：
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
