<template>
<div>
<input
v-model="userPhone"
autofocus
type="text"
maxlength="11"
placeholder="请输入11位手机号"
@input="handlePhone"
@keyup.enter="handleLogin"
>
<button type="button" @click="handleLogin">登录</button>
</div>
</template>

JavaScript部分

<script>
export default {
data () {
return {
userPhone: ''
}
}, methods: {
handlePhone (e) {
this.userPhone = e.target.value.replace(/[^\d]/g, '')
}, handleLogin () {
if (this.userPhone.length === 11) {
console.log('登录成功')
}
}
}
}
</script>

注意重点:表单的内容改变必须使用input事件来处理,必须随时监测表单输入的内容,不能使用watch和change,因为输入法在输入中文的时候监测不到,还要注意的就是表单input的type类型为number的时候移动端可以输入字母e,因为是科学计算法,还可以输入运算符(+,-,*,/)等等。

Vue项目在表单中限制输入数字的更多相关文章

  1. ext当表单中的输入项为必填时,输入项label后显示红色的*

    form表单里,当输入项为必填项时,需要将对应item的allowblank属性设置为true,如果item的label后面自带红色的*,表单中哪些输入项是“必填”,哪些输入项是“非必填”,一眼望去清 ...

  2. 8.javascript获取表单中两个数字,并判断大小

    获取表单数据的方式: 1.表单注意些id 2.使用document.getElementById("num").value 获取值 3.一定要注意现在得到是string类型,可以用 ...

  3. vue 输入框禁止输入空格 ,只能输入数字,禁止输入数字

    正则表达式: @input="form.userName = form.userName.replace(/\s+/g,'')"    ( 禁止输入空格)    @input=&q ...

  4. vue 实现表单中password输入的显示与隐藏.

    实现效果: 点击 “眼睛” 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. 15.VUE学习之-表单中使用key唯一令牌解决表单值混乱问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. Ant-design-vue—— 表单输入框输入很卡问题

    参考:https://blog.csdn.net/weixin_43905402/article/details/106074435 我的问题:vue项目中使用ant-design-vue,表单中输入 ...

  7. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  8. vue项目实现记住密码到cookie功能(附源码)

    实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/ ...

  9. 初始化一个vue项目

    1.安装node 端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安 ...

随机推荐

  1. 【洛谷P4878】布局

    题目大意:给定一个长度为 N 的递增序列,有 M 组差分约束关系,求满足这些约束关系时,第一个数和第 N 个数的差是多少. 题解:首先,能否满足约束关系需要判断一下负环,若满足约束关系,再从第一个点 ...

  2. Django 获取访问者信息

    request内的META里有请求用户的信息 #定义视图方法 def get_ip(request): #打印头部所以信息 # print(request.META) # 获取ip信息 if &quo ...

  3. java类文件

    一个.java文件中可以有很多类.不过注意以下几点: 1.public 权限的类只能有一个(也可以一个都没有,但最多只有1个) ,其他的类不能加public. 2.这个.java文件的文件名必须是pu ...

  4. Mysql+Keepalived双主热备高可用操作记录

    我们通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务.当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服务,而且切换的时间非常短.MySQL双主复制,即互为Mast ...

  5. opencv: 线性拟合

    opencv提供了fitline函数用于直线拟合,原型为: C++: void fitLine(InputArray points, OutputArray line, int distType, d ...

  6. Java的一些基本术语

    1. 反射 获取类本身,就叫“反射”,有以下3种方式: // 通过“实例”获取类 String str = "hello"; Class cls1 = str.getClass() ...

  7. SPI设计

    目录 SPI设计 概述 寄存器配置 title: SPI设计 tags: ARM date: 2018-11-05 15:22:59 --- SPI设计 概述 在SPI协议中,有两个值来确定SPI的模 ...

  8. diff补丁格式

    title: diff补丁格式 tags: 学习 categories: 学习 date: 2018-09-20 21:03:53 --- diff补丁格式 在Uboot学习中,接触到了打补丁这个操作 ...

  9. Tensorflow做阅读理解与完形填空

    catalogue . 前言 . 使用的数据集 . 数据预处理 . 训练 . 测试模型运行结果: 进行实际完形填空 0. 前言 开始写这篇文章的时候是晚上12点,突然想到几点新的理解,赶紧记下来.我们 ...

  10. java程序员常用的linux命令

    作为一个java后端开发者,在日常工作中肯定会有和linux打交道的时候.下面我整理了一些开发中可能需要用到的一些命令(写这篇随笔前,我也没有什么操作经验,主要防止自己忘记这些操作命令,以后有用到新的 ...