vue input 判断
//输入框 判断
//全局异常提示信息
//b 1:失去焦点验证错误提示 2:得到焦点关闭错误提示
//i 来区分是验证那个input框
check:function (t,b) {
var that =this;
if(b==0){
if(t==1){
if(that.fNickNames.trim()==""){
// console.log("空值")
that.error.name="请输入名称"
return
}else{
// console.log("有值了");
var reg = /,/g;
if(!reg.test(that.fNickNames)){
that.error.name="不能有特殊字符,修改过后不能为空 "
}
if(that.fNickNames.length>8){
that.error.name="不能超过八个字"
}
}
}
}else{
if(t==1){
// console.log("选中状态")
that.error.name=""
}
}
},
data定义
//错误弹窗提示
error:{
name:""
},
<div class="inputall top" :class="error.name==''?'':'border-y'">
<span class="input-text">昵称</span>
<div class="prompt-y">{{error.name}}</div>
<input type="text" v-model="fNickNames" placeholder="花花小六" maxlength="10" @focus="check(1,1)" @blur="check(1,0)" class="input-mailbox leftboders"/>
</div>
.border-y {
height: 41px;
border: 2px solid #FF6766;
border-radius: 23px;
z-index:;
position: relative;
}
.prompt-y {
min-width: 200px;
height: 40px;
background: #fff;
border-radius: 4px;
line-height: 40px;
position: absolute;
top: -60px;
left: 20px;
padding: 0 10px;
color: #E45050;
display: none;
}
.prompt-y:after {
content: "";
width:;
height:;
border-width: 10px;
border-style: solid;
border-color: #fff transparent transparent transparent;
position: absolute;
left: 50%;
top: 39px;
transform: translate(-50%);
}
.border-y .prompt-y {
display: block;
}
vue input 判断的更多相关文章
- vue input添加回车触发
普通vue input @keyup.enter="onSubmit" element el-input @keyup.enter.native="onSubmit&qu ...
- Vue.js_判断与循环
一.判断,条件语句 1.一元表达式判断 {{ ok ? 'show' : 'hide' }} 2.if判断 v-if='ok' <ol id="ifGrammar"> ...
- vue input框type=number 保留两位小数自定义组件
第一步:自定义组件MyNumberInput.vue<template> <input class="numberInput" type="number ...
- Vue Input输入框两侧加减框内数字组件
NumberBox组件内容: <template> <div class="number-box" :class="{'box-disable': is ...
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
Html <input id="file" type="file" accept=".map" onchange="uplo ...
- vue input 赋值无效
1.js代码如下 var vm = new Vue({ el:'#rrapp', data:{ q:{ name: null }, dict: {} }, }); 2.文本框代码如下 <inpu ...
- Vue.js 判断对象属性是否存,不存在添加
Vue.set是可以对对象添加属性的,这里item对象添加一个checked属性 //if(typeof item.checked=='undefined'){if(!this.item.checke ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- input判断输入值是否合法
1.判断input输入的值是否合法有很多办法,我这里使用的是在onchange时进行判断,代码如下:[所有主要浏览器都支持] <input type="text" name= ...
随机推荐
- numpy windows环境下载安装
由于numpy在多个平台下非常流行,以至于习惯WINDOWS环境下的用户可能找不到下载位置,更多的时候会下载到zip文件,然后需要安装编译(自然通不过) 1.http://www.scipy.org/ ...
- luogu P3600 随机数生成器【dp】
把期望改成方案数最后除一下,设h[i]为最大值恰好是i的方案数,那么要求的就是Σh[i]*i 首先包含其他区间的区间是没有意义的,用单调栈去掉 然后恰好不好求,就改成h[i]表示最大值最大是i的方案数 ...
- [Xcode 实际操作]八、网络与多线程-(11)使用同步Post方式查询IP地址信息
目录:[Swift]Xcode实际操作 本文将演示如何通过Post请求,同步获取IP地址信息. 一旦发送同步请求,程序将停止用户交互,直至服务器返回数据. 在项目导航区,打开视图控制器的代码文件[Vi ...
- 构建使用SQL服务器的ASP.net Core2.0 API
web api的教程非常少,使用 core2.0的更少,微软提供了一个aspnet core2的教程,也提供了EF core中访问SQL服务器的教程,参考这些教程可以做出使用sql server的as ...
- C 语言实例 - 字符转 ASCII 码
C 语言实例 - 字符转 ASCII 码 C 语言实例 C 语言实例 ASCII 定义了 个字符. 分类: 一:-.(删除键)是控制字符 二:空白字符:空格(). 制表符. 垂直制表符. 换行. 回车 ...
- Excel - 使用公式将秒转换为分+秒
场景 现在有个需求:将Excel里的时间转换为分+秒的格式,如下: time(second) time(min+second) 482.712 XXmin,XXs 480.737 XXmin,XXs ...
- VLAN-2-私有VLAN
好的设计方式通常要求工程师为每个vlan使用一个ip子网.然而在有些情况下,将设备分割到许多小VLAN中以增加安全性的需求,与节省可用子网的目标相互冲突.通过使用私有vlan,交换机能够分 ...
- mongodb vs redis(Tokyo Tyrant转)
* MongoDB vs Redis vs Tokyo Tyrant(原文链接:http://www.cnblogs.com/riceball/archive/2010/03/05/MongoDB_V ...
- js字符串与正则匹配
这里就说一下具体的使用方法,不做过多的解释. 字符串匹配正则的方法:str.方法(reg) 1.str.search() 参数是正则,将会从开始查找字符串中与正则匹配的字符,并返回该字符的第一次出现的 ...
- redis配置配置文件
# redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...