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 ...
随机推荐
- POJ 1273 Drainage Ditches (网络流Dinic模板)
Description Every time it rains on Farmer John's fields, a pond forms over Bessie's favorite clover ...
- UVa 839 Not so Mobile (递归思想处理树)
Before being an ubiquous communications gadget, a mobilewas just a structure made of strings and wir ...
- 前端每日实战:58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可 ...
- django中初学常犯错误之梳理
一,关于setting设置,1,两个INSRALLEN_APPS,需要将新建的app添加进去 2,需要再setting将html的路径拼接起来 二,urls.py 设置,from app名 impor ...
- UML的类型
分类 UML从考虑系统的不同角度出发,定义了用例图.类图.对象图.包图.状态图.活动图.序列图.协作图.构件图.部署图等10种图. 常见的UML图有用例图(Use Case Diagram).类图(C ...
- 微信小程序中使用阿里ICON图标
由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...
- 在RedHat 7.2中安装boost库
在RedHat 7.2中安装boost库 环境,其它版本类似 Redhat7.2 64bit boost 1.64.0 步骤 去 boost官网 下载想要版本的.tar.gz,如下图 解压tar -v ...
- 线程类中使用spring注解报空指针异常
springboot项目开发中,作为服务端,实现了线程类,在此类中添加spring注解@Source注入的service,报空指针异常. 查原因后,发现是线程中,不支持spring注解,因为sprin ...
- js 中 !!的用法
!!是将表达式强制转化为bool值的运算,运算结果为true或false,表达式是什么值,结果就是对应的bool值,不再取非. 不是取非再取非的意思!!! !!false=false; 要注意f ...
- CentOS 7.4安装telnet服务端
CentOS 7.4安装telnet服务端 安装xinetd服务 # yum -y install xinetd 安装telnet-server # yum -y install telnet-ser ...