<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
}
}
}
}

 

vue简单的input校验手机号的更多相关文章

  1. vue实现手机号码的校验(防抖函数的应用场景)

    上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询.scroller.onresize等场景:今天这篇我们来讲防抖函数的应用场景:: 通过上一篇博文的学习,我们知道了防抖函数的 ...

  2. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  3. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  4. Struts2学习---简单的数据校验、访问Web元素

    1.简单的数据校验 在action里面我们已经给出了一个数据校验: public String execute() { if(user.getUsername().equals("usern ...

  5. AngularJS进阶(十三)JS利用正则表达式校验手机号

    JS利用正则表达式校验手机号 注:请点击此处进行充电! 绪 由于项目需求,需要在前端实现手机号码的校验.当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完 ...

  6. Vue.js表单校验;动画指令;避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  7. struts 简单前台用户名校验

    一个jsp <?xml version="1.0" encoding="GB18030" ?> <%@ page language=" ...

  8. Delphi:校验手机号及身份证号

    //校验手机号  function IsMobileNumber( num:string ):boolean;   begin     Result:=False;     if length( tr ...

  9. 前端Vue中常用rules校验规则

    前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...

随机推荐

  1. Selenium webdriver 安装(一)

    6年的.NET开发,干过小项目,做过研发,任何架构.设计模式.各种文档齐全.技术大牛,给我最深的体会是都不如用户最后的轻轻一点,一下毁所有.这个时候我突然想起了一首歌<都选C>哈哈.如何防 ...

  2. 93、R语言教程详解

    加载数据 > w<-read.table("test.prn",header = T) > w X.. X...1 1 A 2 2 B 3 3 C 5 4 D 5 ...

  3. https://www.cnblogs.com/limanjihe/p/10184327.html

    https://www.cnblogs.com/limanjihe/p/10184327.html https://blog.csdn.net/xnnswmzdszyd/article/details ...

  4. MySQL高级学习笔记(七):MySql主从复制

    文章目录 复制的基本原理 slave会从master读取binlog来进行数据同步 三步骤+原理图 复制的基本原则 复制的最大问题 一主一从常见配置 mysql版本一致且后台以服务运行(双方能够pin ...

  5. StaticInjectorError[Http]:

    报错:AppComponent.html:28 ERROR Error: StaticInjectorError[Http]: StaticInjectorError[Http]: 解决方法:

  6. Cocos2d-x之引擎框架简介

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.cocos2d-x的设计思想 cocos2d-x分为导演,场景,图层,精灵,节点: (1).导演(Director):控制整个游戏的场 ...

  7. Mysql 生成随机数字

    其实思路很简单,利用MySQL现有的函数,然后进行加工处理,达到预期的结果.可以用到的MySQL函数为rand() ,以及 round() 函数. 具体为:select round(rand()*10 ...

  8. python面试题之如何用Python找出你目前在哪个目录?

    >>> import os >>> os.getcwd() 'C:\Users\lifei\AppData\Local\Programs\Python\Python ...

  9. python之命名元组的好处

    collections.namedtuple() 命名元组的一个主要用途是将你的代码从下标操作中解脱出来举例使用 # 使用 from collections import namedtuple Sub ...

  10. 【教程】CentOS 7安装 最新版本Docker

    博主最近需要安装Docker,步骤如下: Docker安装官方地址:https://docs.docker.com/install/linux/docker-ce/centos/ 以下命令都是在roo ...