Vue+elementUI el-input输入框手机号校验功能
1.限制input框内只能输入数字,且为11位
type="number" // 数字类型
// maxlength属性对type="number"类型的输入框无效
οninput="if(value.length>11)value=value.slice(0,11)"
2.对输入手机号做校验
<el-form :model="dialogData" :rules="addAddressRules" ref="dialogData"> <el-form-item label="" prop="phone"> <el-input placeholder="请输入电话号码" v-model="dialogData.phone" type="number" oninput="if(value.length>11)value=value.slice(0,11)" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" size="large" clearable > </el-input> </el-form-item> </el-form>
data() { var checkPhone = (rule, value, callback) => { // 手机号验证 if (!value) { return callback(new Error('手机号不能为空')); } else { const reg = /^1[3456789]\d{9}$/ if (reg.test(value)) { callback(); } else { return callback(new Error('请输入正确的手机号')); } } }; return { dialogData: { phone:'', }, addAddressRules: { phone: [ { required: true, message: "请输入正确手机号", trigger: "blur" }, {validator: checkPhone, trigger: 'blur'} ], }, } },
实现效果:
到此这篇关于Vue+elementUI el-input输入框手机号校验的文章就介绍到这了,更多相关Vue+elementUI el-input输入框校验手机号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
详解Vue+axios+Node+express实现文件上传(用户头像上传)
这篇文章主要介绍了详解Vue+axios+Node+express实现文件上传(用户头像上传),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08vue create、vue webpack init创建vue项目产生的项目文件的区别
这篇文章主要介绍了vue create、vue webpack init创建vue项目产生的项目文件的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
最近接了个项目需要开发一个app项目,由于是第一次接触这种app开发,经过一番思考,决定使用Vue3+Vant前端组件的模式进行开发,下面把问题分析及实现代码分享给大家,需要的朋友参考下吧2021-06-06vue3 TS vite element ali-oss使用教程示例
这篇文章主要为大家介绍了vue3 TS vite element ali-oss使用教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
最新评论