<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. OC学习篇之---循环引用问题

    在之前的一片文章中,我们介绍了数组操作对象的时候引用问题以及自动释放池的概念: http://blog.csdn.net/jiangwei0910410003/article/details/4192 ...

  2. Network基础(三):网线的制作、交换机基本命令模式、交换机命令行基本配置、交换机的密码设置

    一.网线的制作 目标: 在常见的计算机网络中,网线主要用来连接计算机与交换机(或宽带路由器).交换机与交换机.交换机与路由器,以及需要连网的其他各种设备.网线的制作与测试是作为网络管理员的一个入门技能 ...

  3. BZOJ 4059: [Cerc2012]Non-boring sequences(启发式分治)

    传送门 解题思路 首先可以想到要预处理一个\(nxt_i\)和\(pre_i\),表示前后与当前位置权值相同的节点,那么这样可以迅速算出某个点在某段区间是否出现多次.然后这样的话就考虑分治,对于\([ ...

  4. 让vue用于小程序setData方法

    setData:function(obj){ let that = this; let keys = []; let val,data; Object.keys(obj).forEach(functi ...

  5. java集合框架面试要点整理

  6. PHP面试 MySQL数据库基础

    MySQL数据库基础 MySQL数据类型 整数类型:TINYINT   SMALLINT   MEDIUMINT   INT   BIGINT 属性:UNSIGNED 长度:可以为整数类型指定宽度,列 ...

  7. NetworkComms V2版本与V3版本语法的差异

    NetworkComms网络通信框架序言 NetworkComms通信框架中V3版本是一次重要的升级,底层做了诸多改变,但语法上与V2版本相比,差不并不大. 监听端口: V3中 IPEndPoint ...

  8. Struts1.3——使用MyEclipse集成工具开发Struts

    前面两篇通过手工写代码,手工配置struts-config.xml文件的方法来开发了一个最简单的struts项目,通过手工的方式旨在学习底层原理细节.当熟悉了以后,我们就不需要再通过纯手工的方式来开发 ...

  9. Java8环境设置

    假设你已经安装在 C:Program Filesjavajdk 目录: 在“我的电脑”右键单击并选择“属性”. 在“高级”选项卡下单击“环境变量”按钮. 现在,改变“Path”变量,因此,它也包含了路 ...

  10. QT5.2 Assistant-设置应用程序图标

       在Qt助手(assistant.exe)搜索关键字"Setting the Application Icon"就可以看到在各种平台设置Qt程序图标的方法,包括QT支持的Win ...