输入框限制只能输入手机号码，并且以3-4-4格式分开

一时失言乱红尘 2022-10-07 10:51 151阅读 0赞

data(){
        return{
            form: {
              uscuName: null, // 学生
              uscuPhone: null, // 注册手机号
              sex: -1, // 性别
              camId: null, // 学籍校区id
              campusName: null, // 学籍校区
              grade: null, // 年级 
              courseEducationalType: null, // 学年制 
              uscuThirdCode: null, // 用户三方库编码 
          },
        }
    },
    // 使用监听器的格式来控制手机号码只能输入数字
    watch：{
    'form.uscuPhone':{
          handler(newValue, oldValue) {
            let oldLength = oldValue ? oldValue.length : 0;
            //  newValue.replace(/\s/g, '') 去掉空格； 
            // replace(/[^\d]/g,'') 去掉非数字的字符； 
            //replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') 分割成 3-4-4 格式的手机号；
            this.form.uscuPhone = 
             newValue.length > oldLength ? 
              newValue.replace(/\s/g, '').replace(/[^\d]/g,'').replace(/(\d{3})(\d{0,4})    (\d{0,4})/, '$1 $2 $3') 
                : this.form.uscuPhone.trim();
            if (this.form.uscuPhone.length > 13) {
              // 验证/保存的手机号码，截取13位（其中包含两个空格）
              this.form.uscuPhone = this.form.uscuPhone.substring(0,13);
            } 
            this.telphoneTrue = this.form.uscuPhone.length === 13 ? true : false;
           
          },
          deep:true
        },
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 输入框只能输入数字

说明：οnkeyup=按键抬起触发， onafterpaste=粘贴之后触发 onkeypress =按下并放开任何字母数字键时触发 onbeforepaste=粘贴

男娘i/ 2024年02月17日 18:04/ 0 赞/ 61 阅读

相关在HTML中限制input 输入框只能输入纯数字

限制 input 输入框只能输入纯数字 1、onkeyup = "value=value.replace(/\[^\\d\]/g,'')" 使用 onkeyup 事件，有

青旅半醒/ 2023年10月18日 16:29/ 0 赞/ 142 阅读

相关限制 input 输入框只能输入纯数字

限制 input 输入框只能输入纯数字 1、onkeyup = "value=value.replace(/\[^\\d\]/g,'')" 使用 onkeyup 事件，有

梦里梦外;/ 2023年10月09日 12:42/ 0 赞/ 90 阅读

相关 pc 端输入框限制只能输入字母和数字 vue

<div class="inputnumber "> <input type="text" value="value" onkeyup="value=valu

拼搏现实的明天。/ 2023年02月22日 03:58/ 0 赞/ 8 阅读

相关输入框限制规则只能输入数字只能输入字母数字等等

输入大小写字母、数字、下划线： <input type="text" onkeyup="this.value=this.value.replace(/[^\w_

超、凢脫俗/ 2022年11月17日 10:21/ 0 赞/ 310 阅读

相关输入框限制只能输入手机号码，并且以3-4-4格式分开

data(){ return{ form: { uscuName: null, // 学生

一时失言乱红尘/ 2022年10月07日 10:51/ 0 赞/ 152 阅读

相关 vue输入框限制各种输入格式

（1）限制只能输入数字、带小数点的数字 <el-input v-model="form.userName" @input="onInput('keyName', $e

清疚/ 2022年09月04日 07:48/ 0 赞/ 435 阅读

相关 Android Edittext 手机号码格式输入设置

一. 效果图 ![这里写图片描述][SouthEast] 根据需求要实现的是输入手机号码格式的数字文本，并且输入时能根据手机号码自动分隔成美观的带空格的格式，点击完成后

ゝ一世哀愁。/ 2022年06月02日 00:59/ 0 赞/ 283 阅读

相关手机号码为344格式

// 去掉字符串中所有空格(包括中间空格,需要设置第2个参数为:g) function trim(str, is_global) { var res

た入场券/ 2022年05月13日 03:26/ 0 赞/ 183 阅读

相关 input输入框只能输入数字

<input type="number" class="input-control input-l" id="oldcard" oninput = "value=val

骑猪看日落/ 2022年02月01日 13:09/ 0 赞/ 422 阅读