<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. PWM输出,呼吸灯

    一.初始化GPIO 使用PB1,查芯片手册对应TIM3_CH4 GPIO_InitTypeDef GPIO_InitStructure; RCC_APB2PeriphClockCmd(RCC_APB2 ...

  2. Red Hat Enterprise Linux 7.x新特性

    Red Hat Enterprise Linux 7.x新特性 RHEL7新特性简介 1.      RHEL7目前支持架构 64-bit AMD.64-bit Intel.IBM POWER.IBM ...

  3. php开发面试题---PHP为什么不安全,主要有那些安全问题(整理)

    php开发面试题---PHP为什么不安全及常见的攻击方式(整理) 一.总结 一句话总结: 其实安全和语言关系不大,主要和程序员关系比较大,php也就是因为是弱类型语言,所以不如java健壮,php会遇 ...

  4. hbase shell插入根据条件查询数据

    hbase shell插入根据条件查询数据 创建并插入数据: hbase(main):179:0> create 'scores','grade','course' hbase(main):18 ...

  5. generate ascii table

    $ cat ascii.sh dec_count=0 while [ $dec_count -lt 256 ] do echo -e "\x$(echo "ibase=10;oba ...

  6. Python Numpy线性代数操作

    Python Numpy线性代数函数操作 1.使用dot计算矩阵乘法 import numpy as np from numpy import ones from __builtin__ import ...

  7. camunda流程部署的一些简单操作

    act_re_deployment:(流程部署对象表)存放流程部署的显示名和部署时间 act_re_procdef:(流程定义表)存放流程定义的属性信息 act_ge_bytearray:(资源文件表 ...

  8. C++基础知识随记

    一.什么情况必须使用初始化列表的方式声明构造函数? 1.包含常量类型的成员 2.包含引用类型的成员 3.包含没有默认构造函数的类类型成员 4.优点:对于包含有类类型成员的类来说,省去了调用一次默认构造 ...

  9. 是否有任何python库可以从自然语言中解析日期和时间?

    我正在寻找的是可以将“明天早上6点”或“中午的下一个模拟”转换为适当的日期时间对象. 解决方案 parsedatetime - 能够解析“人类可读”日期/时间表达式的Python模块. #!/usr/ ...

  10. HDU 1261 字串数(排列组合)

    字串数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...