vue简单的input校验手机号

<input class="phone input-style " :class="{'err-input' : phone.err}" v-model="phone.val" type="text" placeholder="请输入手机号" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11" @blur="phone.test()">
复制代码

复制代码
data(){
            return {
                hintShow : false,  // 提示语显示
                hint : '信息填写错误', // 提示语

                /*
                *  val 为值,err为错误显示, test检验信息
                * */
                phone : {
                    val : '',
                    err : false,
                    pass: false,
                    test : function () {
                        // 验证手机号
                        let reg = /^1[0-9]{10}$/
                        if (this.val == '' || this.val.length <= 10 || !reg.test(this.val)) {
                            vm.$data.hintShow = true
                            vm.$data.hint = '请输入正确的手机号'
                            this.err = true
                            return false
                        }

                        vm.$data.hintShow = false
                        vm.$data.hint = ''
                        this.err = false
                        this.pass = true
                        return true
                    }
                }
            }
        }
复制代码

 

 
复制代码

 

posted @   惠鹏曦  阅读(23738)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示