您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。