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= ...
随机推荐
- 3DMAX 4角色蒙皮
1 角色建模 略,以后补充 2 骨骼绑定 一般不用骨骼直接拉,Biped足够,以后适当补充骨骼直接拉的操作 1 将Biped骨骼和模型对齐 1 创建biped之后,第一步一要先选择,然后再对位骨骼到模 ...
- 51nod1267(双指针)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1267 题意:中文题诶- 思路:双指针 求a+b+c+d=0,令 ...
- linux命令行挂载NTFS文件系统的移动硬盘
环境 ubuntu 12.04 桌面版 由于我的ubuntu 是安装在vmware 上,如果接入移动硬盘后,它没有办法自动识别ntfs 格式的文件系统,导致mount 盘失败 从网上找到一个方法 首先 ...
- 部署spark 1.3.1 standalong模式
之前已经写过很多次部署spark 的博客,但是之前部署都是照瓢画葫芦,不得其中的细节,并且以前都是部署spark on yarn 部署环境 scala 2.10.2,jdk 1.6,spark 版本1 ...
- 用vector实现普通平衡树 By cellur925
其实我真的很想学习手写平衡树的==.但是感觉联赛前真没有时间了(太菜了.),于是先学一个STL代用苟,如果还能继续在\(tsoi\)苟,回来一定先学平衡树=w=. 然后因为窝对STL用的不是特别好,有 ...
- ADO学途 two day
代码实现的参照性在学习程序中占了关键比重,最基本的都一直无法运行成功,那就无法深入 研究.实现winfrom功能的要点之一实践中获取原理:不清楚代码的一些原理,即使copy过来,大多也 存无法运行的情 ...
- react native的Navigator组件示例
import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from ...
- Codeforces Round #547 (Div. 3) D. Colored Boots
链接:https://codeforces.com/contest/1141/problem/D 题意: 给连个n长度的字符串. 求两个字符串相同字符对应位置的对数,并挨个打印. 字符:?可以代替任何 ...
- Hive_Hive的数据模型_内部表
Hive的数据模型_内部表 - 与数据库中的Table在概念上是类似.- 每一个Table在Hive中都有一个相应的目录存储数据.- 所有的Table数据(不包括External Table)都保存在 ...
- 【aspnetcore】模拟中间件处理请求的管道
几个核心对象: ApplicationBuilder 就是startup->Configure方法的第一个参数,请求(HttpContext) 就是由这个类来处理的 HttpContext 这个 ...