<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. vue的proxy和defineProperty区别

    Object.defineProperty(obj,"name",{ set:function(val){ if(var==='lisi'){ console.log(" ...

  2. Autofac框架详解 转载https://www.cnblogs.com/lenmom/p/9081658.html

    一.组件 创建出来的对象需要从组件中来获取,组件的创建有如下4种(延续第一篇的Demo,仅仅变动所贴出的代码)方式: 1.类型创建RegisterType AutoFac能够通过反射检查一个类型,选择 ...

  3. laravel定义全局变量

    laravel中config()函数可以获取 bootstrap/cache/config.php中的内容,而config文件夹下的所有配置文件夹中的内容可以通过  php artisan confi ...

  4. SQL 测验题目(30道)

    1.SQL 指的是? 您的回答:Structured Query Language 2.哪个 SQL 语句用于从数据库中提取数据? 您的回答:SELECT 3.哪条 SQL 语句用于更新数据库中的数据 ...

  5. upc组队赛5 Ingenious Lottery Tickets【排序】

    Ingenious Lottery Tickets 题目描述 Your friend Superstitious Stanley is always getting himself into trou ...

  6. linux下载文件到本地

    使用XShell工具 1.首先虚拟机要联网 2.服务器要安装了rz,sz yum install lrzsz 运行rz,会将windows的文件传到linux服务器   运行sz filename,会 ...

  7. 12-vim-撤销和删除命令-02-删除文本

    删除文本 命令 英文 功能 x cut 删除光标所在字符 d(移动命令) delete 删除移动命令对应的内容 dd delete 删除光标所在行 D delete 从光标位置删除至行尾 注: 如果使 ...

  8. 从Airbnb的发展历程和网易云的大起大落看IT行业创新(第5周课后作业)

    我想先根据个人看法回答“创新是什么?”这个空泛的问题.创新是面对当下的资源条件限制创造出能够满足动态需求或解决动态发展中的问题的新策略.这种实用化定义在大部分邻域都勉强能让定义者自圆其说,对于IT行业 ...

  9. Socket传输中文乱码

    最近在学习Socket的时候,遇到了中文乱码问题,在网上找到了一个说的很透彻的,这里分享一下:http://helloworlda.iteye.com/blog/1270703 现在问题是这样的: 打 ...

  10. texi2dvi - 打印 Texinfo 文档

    SYNOPSIS 总览 texi2dvi [OPTION]... FILE... DESCRIPTION 描述 依次从 Tex 系统中运行每个 Texinfo 或者 LaTex 文件 FILE,直到解 ...