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 ...
随机推荐
- PWM输出,呼吸灯
一.初始化GPIO 使用PB1,查芯片手册对应TIM3_CH4 GPIO_InitTypeDef GPIO_InitStructure; RCC_APB2PeriphClockCmd(RCC_APB2 ...
- Red Hat Enterprise Linux 7.x新特性
Red Hat Enterprise Linux 7.x新特性 RHEL7新特性简介 1. RHEL7目前支持架构 64-bit AMD.64-bit Intel.IBM POWER.IBM ...
- php开发面试题---PHP为什么不安全,主要有那些安全问题(整理)
php开发面试题---PHP为什么不安全及常见的攻击方式(整理) 一.总结 一句话总结: 其实安全和语言关系不大,主要和程序员关系比较大,php也就是因为是弱类型语言,所以不如java健壮,php会遇 ...
- hbase shell插入根据条件查询数据
hbase shell插入根据条件查询数据 创建并插入数据: hbase(main):179:0> create 'scores','grade','course' hbase(main):18 ...
- generate ascii table
$ cat ascii.sh dec_count=0 while [ $dec_count -lt 256 ] do echo -e "\x$(echo "ibase=10;oba ...
- Python Numpy线性代数操作
Python Numpy线性代数函数操作 1.使用dot计算矩阵乘法 import numpy as np from numpy import ones from __builtin__ import ...
- camunda流程部署的一些简单操作
act_re_deployment:(流程部署对象表)存放流程部署的显示名和部署时间 act_re_procdef:(流程定义表)存放流程定义的属性信息 act_ge_bytearray:(资源文件表 ...
- C++基础知识随记
一.什么情况必须使用初始化列表的方式声明构造函数? 1.包含常量类型的成员 2.包含引用类型的成员 3.包含没有默认构造函数的类类型成员 4.优点:对于包含有类类型成员的类来说,省去了调用一次默认构造 ...
- 是否有任何python库可以从自然语言中解析日期和时间?
我正在寻找的是可以将“明天早上6点”或“中午的下一个模拟”转换为适当的日期时间对象. 解决方案 parsedatetime - 能够解析“人类可读”日期/时间表达式的Python模块. #!/usr/ ...
- HDU 1261 字串数(排列组合)
字串数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...