html表单验证不能为数字,element-ui表单中不可以输入纯数字的解决方法

element-ui表单中不可以输入纯数字的解决方法

发布时间：2020-11-04 16:43:39

来源：亿速云

阅读：172

作者：Leah

element-ui表单中不可以输入纯数字的解决方法？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

oninput = "value=value.replace(/[^\d]/g,'')"

>

补充知识：element form表单验证(数字，手机号，邮箱)

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

立即创建

重置

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();

}

}

}

效果如下：

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。