<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/41926531,今天我们来看一下OC中的单 ...

  2. 转载:@RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    转载自:https://blog.csdn.net/walkerjong/article/details/7946109#commentBox   因为写的很好很全,所以转载过来 引言:接上一篇文章, ...

  3. Nginx在Windows平台的配置

    Nginx在Windows平台的配置 能够使用Nginx搭建Tomcat集群,并完成负载均衡. 1.什么是Nginx 2.为什么使用Nginx 背景: 互联网飞速发展的今天,大用户量高并发已经成为互联 ...

  4. Nodejs-交互式版本管理

    n - npm:Interactively Manage Your Node.js Versions

  5. 将libvex移植到Visual Studio编译平台下的经验总结

    1. 两难 将libvex从Linux移植到Windows,移植工作聚集于Cross-Compiler,而不是预料的Cross-Platform. VC++ Compiler到目前为止只支持C89标准 ...

  6. Java中深度克隆和浅度克隆

    一:使用目的: 就是为了快速构造一个和已有对象相同的副本.如果需要克隆对象,一般需要先创建一个对象,然后将原对象中的数据导入到新创建的对象中去,而不用根据已有对象进行手动赋值操作. 二:Object中 ...

  7. Perceptron Algorithm 感知器算法及其实现

    Rosenblatt于1958年发布的感知器算法,算是机器学习鼻祖级别的算法.其算法着眼于最简单的情况,即使用单个神经元.单层网络进行监督学习(目标结果已知),并且输入数据线性可分.我们可以用该算法来 ...

  8. PHP CURL 模拟form表单上传遇到的小坑

    1:引用的时候 $parans ['img']=new \CURLFile($param); 传入的文件 在PHP版本5.5以上记得new CURLFile 不然会上传不成功 /** * http p ...

  9. Spring入门,使用Maven进行管理

    一,使用maven创建项目原型 mvn archetype:generate 进入交互模式创建项目原型,根据网速不同,跳出设置选项的时间不定 第一个选项 直接Enter即可,表示使用默认值502,后面 ...

  10. 深入JAVA虚拟机笔记

    1.对堆的理解: a):所有的对象实例以及数据都要在堆中分配 b):新生代和老年代存在于堆中