el-input 输入手机号

原创于 2021-12-20 19:30:36 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

前端专栏收录该内容

190 篇文章

订阅专栏

本文介绍了一种确保用户输入手机号码时只包含数字的方法。通过结合使用onkeyup事件清除非数字字符，并利用@blur事件同步视图与数据模型，保证了手机号字段的准确性。

        <el-form-item label="手机号：" prop="phone">
          <el-input
            v-model="identityForm.phone"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            @blur="identityForm.phone = $event.target.value"
            :placeholder="formPlaceholder.phone"
          ></el-input>
        </el-form-item>

光有 οnkeyup="value=value.replace(/[^\d]/g,'')" 不行，

这时候v-model identityForm.phone的值可能与输入框显示的值不一致，存在特殊字符

所以必须使用@blur事件保持数据和显示一致