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 3场景制作
1 模型制作 2 UVW贴图展开 1 打开材质编辑器,给模型一个材质(以后应该以这个材质生成uvw展开,进而生成贴图,贴图绘制完毕后,再贴回这个材质中,就完成了给模型加贴图的操作) 2 在编辑面板中添 ...
- PHP实现用户登录注册功能
初学php做了一些比较常见且有用的页面,放在上面记录一下咯 我是用了bootstrap框架里面的模态框做注册登陆页面,这样页面比较美观 页面效果: 注册成功条件/功能: 1)用户名不能冲突 2)两次密 ...
- day04 异常
- linux定时任务报错mysql: command not found
本人在用docker做镜像的时候,把定时任务打到镜像里,但是执行的时候发现错误日志总是报 sh: mysql: command not found ,然后开始解决问题 1)首先确认镜像有没有装mysq ...
- C# 面向对象之继承
Object是所有类的基类 1.在C#中一个类可以继承另一个类(密封类除外,静态类是密封的不能被继承); 2.被继承的类被成为基类(父类);继承的类被成为派生类(子类); 3.子类将获得父类除构造函数 ...
- Django (二) url 和 模板
1. URL URL地址说明: 使用url给视图函数传参数 在url配置中将正则部分小括号括起来.比如: url(r'^time/plus/(\d{1,2})/$', views.hours_ahea ...
- dzzoffice 任意文件删除漏洞分析
dzzofiice 任意文件删除漏洞 \upload\dzz\system\dzzcp.php第199行 elseif($do=='deleteIco'){ $arr=array(); $ ...
- spring security 5 There is no PasswordEncoder mapped for the id "null" 错误
转载请注明出处 http://www.cnblogs.com/majianming/p/7923604.html 最近在学习spring security,但是在设置客户端密码时,一直出现了一下错误提 ...
- 优秀Java程序员的四大忌,你避免了吗?
做为一名优秀的程序员需要具备永不放弃的精神,如果一个程序员不具备这种永不放弃的精神,那么这个程序员只能算是一名假程序员.而通往成功的道路上往往是不平坦的,想要成为一个合格的高级Java程序员,需要规避 ...
- 精通AngularJS(三)深入scope,继承结构,事件系统和生命周期
深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让 ...