//输入框 判断

            //全局异常提示信息
//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 判断的更多相关文章

  1. vue input添加回车触发

    普通vue input @keyup.enter="onSubmit" element el-input @keyup.enter.native="onSubmit&qu ...

  2. Vue.js_判断与循环

    一.判断,条件语句 1.一元表达式判断 {{ ok ? 'show' : 'hide' }} 2.if判断 v-if='ok' <ol id="ifGrammar"> ...

  3. vue input框type=number 保留两位小数自定义组件

    第一步:自定义组件MyNumberInput.vue<template> <input class="numberInput" type="number ...

  4. Vue Input输入框两侧加减框内数字组件

    NumberBox组件内容: <template> <div class="number-box" :class="{'box-disable': is ...

  5. 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题

    Html <input id="file" type="file" accept=".map" onchange="uplo ...

  6. vue input 赋值无效

    1.js代码如下 var vm = new Vue({ el:'#rrapp', data:{ q:{ name: null }, dict: {} }, }); 2.文本框代码如下 <inpu ...

  7. Vue.js 判断对象属性是否存,不存在添加

    Vue.set是可以对对象添加属性的,这里item对象添加一个checked属性 //if(typeof item.checked=='undefined'){if(!this.item.checke ...

  8. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  9. input判断输入值是否合法

    1.判断input输入的值是否合法有很多办法,我这里使用的是在onchange时进行判断,代码如下:[所有主要浏览器都支持] <input type="text" name= ...

随机推荐

  1. 如何快速将vc++的类转换为c#/cli

    所有需要的工具: 1. TextTemplate 2. P/Invoke Interop Assistant 3. DotNetResolver vc++的native类一般是无法直接暴露在.net环 ...

  2. 51nod1086(多重背包&二進制)

    題目鏈接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1086 題意:中文題誒- 思路:很顯然這是一道多重背包題,不過這 ...

  3. uoj#267. 【清华集训2016】魔法小程序(乱搞)

    传送门 感觉很像FFT的过程的说-- 先来考虑\(b\)如何转化成\(c\),那么只要通过它的逆过程就可以了 首先,我们称"魔法"为比较两个数的字典序,记\(x=a_0\),那么把 ...

  4. [Xcode 实际操作]一、博主领进门-(8)应用代理文件(AppDelegate.swift)详解

    目录:[Swift]Xcode实际操作 本文将演示使用iOS模拟器,演示程序的生命周期. 在项目导航区,打开应用代理文件[AppDelegate.swift] 应用代理文件时系统运行本应用的委托,里面 ...

  5. 3.Python自我修炼(升仙中....整数,布尔值,字符串,for循环)

    python学习(整数,布尔值,字符串,for循环) 1.整数 ​ 在python3中所有的整数都是int类型. 但在python2中如果数据量比较大. 会使用long类型.但是在python3中不存 ...

  6. JSP && Servlet | AXIS 0配置 入门

    Axis2是目前比较流行的WebService引擎.WebService被应用在很多不同的场景.例如,可以使用WebService来发布服务端 Java类的方法,以便使用不同的客户端进行调用.这样可以 ...

  7. POJ-325Corn Fields

    链接:https://vjudge.net/problem/POJ-3254#author=freeloop 题意: 农场主John新买了一块长方形的新牧场,这块牧场被划分成M行N列(1 ≤ M ≤ ...

  8. 牛客寒假5-I.炫酷镜子

    链接:https://ac.nowcoder.com/acm/contest/331/I 题意: 小希拿到了一个镜子块,镜子块可以视为一个N x M的方格图,里面每个格子仅可能安装`\`或者`/`的镜 ...

  9. 为VS中的括号添加虚线

    在VS中的扩展和更新中 安装Indent Guides插件,即可实现该功能.

  10. [已读]javascript语言精粹

    又是一本广为赞颂的好书,当时才刚开始学,啃这本书的时候于是比较困难.记得是有介绍一些js中的“精华”与“糟粕”.