vue简单的input校验手机号
<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校验手机号的更多相关文章
- vue实现手机号码的校验(防抖函数的应用场景)
上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询.scroller.onresize等场景:今天这篇我们来讲防抖函数的应用场景:: 通过上一篇博文的学习,我们知道了防抖函数的 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- Struts2学习---简单的数据校验、访问Web元素
1.简单的数据校验 在action里面我们已经给出了一个数据校验: public String execute() { if(user.getUsername().equals("usern ...
- AngularJS进阶(十三)JS利用正则表达式校验手机号
JS利用正则表达式校验手机号 注:请点击此处进行充电! 绪 由于项目需求,需要在前端实现手机号码的校验.当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完 ...
- Vue.js表单校验;动画指令;避免内存泄露。
Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...
- struts 简单前台用户名校验
一个jsp <?xml version="1.0" encoding="GB18030" ?> <%@ page language=" ...
- Delphi:校验手机号及身份证号
//校验手机号 function IsMobileNumber( num:string ):boolean; begin Result:=False; if length( tr ...
- 前端Vue中常用rules校验规则
前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...
随机推荐
- 搭建ceph集群(单节点)
https://blog.csdn.net/Greenchess/article/details/77525786 软件环境: - Centos7 x64 CEPH版本 : - ceph-deploy ...
- ruby puts语法
str = "Welcom to china" str1 = str puts str + " 1" puts str1 + " 1" de ...
- UNP学习第八章udp
一.基本UDP套接口编程 #include <sys/socket.h> ssize_t recvfrom(int sockfd, void *buff, size_t nbytes, i ...
- paper 142:SDM算法--Supervised Descent Method
对于face recognition的研究,我是认真的(认真expression,哈哈哈~~~~~~)许久没有写blog了,欢迎一起讨论. SDM(Supvised Descent Method)方法 ...
- PLSQL连接虚拟机中的Oracle数据库
下面这个连接对以后虚拟机安装非常有用!!! https://blog.csdn.net/lixin5456985/article/details/81670095
- 2018-2019-2 20175223 实验三《敏捷开发与XP实践》实验报告
目录 北京电子科技学院(BESTI)实验报告 实验名称:实验三 敏捷开发与XP实践 实验内容.步骤与体会: 一.实验三 敏捷开发与XP实践-1 二.实验三 敏捷开发与XP实践-2 三.实验三 敏捷开发 ...
- python join函数
join()函数 语法: 'sep'.join(seq) 参数说明sep:分隔符.可以为空seq:要连接的元素序列.字符串.元组.字典上面的语法即:以sep作为分隔符,将seq所有的元素合并成一个新 ...
- windows下Mysql5.7表名不区分大小写问题
前言 Windwos文件系统本身是不区分大小写的,但是Linux文件系统是支持大小写的.于是安装在Linux下的Mysql导出到windows下可能因为大小写问题导致错误,因此要开启window下My ...
- 框架-.NET:.NET Core
ylbtech-框架-.NET:.NET Core .NET Core是适用于 windows.linux 和 macos 操作系统的免费.开源托管的计算机软件框架,是微软开发的第一个官方版本,具有跨 ...
- UCML 原生Android中嵌入Cordova Webview
Android实现在当前进程打开网页可以将Cordova中的WebView嵌入Android项目中,实现简单,不需要自己实现,所以掌握如何嵌入WebView对项目快速开发很有帮助 官方也有这方面的教程 ...