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= ...
随机推荐
- Peptidomics analysis of milk protein-derived peptides
released over time in the preterm infant stomach
(文献分享一组-陈凌云)
题目:Peptidomics analysis of milk protein-derived peptides released over time in the preterm infant st ...
- 在 UIViewController 中手动增加 TableView 出现 Type 'SomeViewController' does not confirm to protocol 'UITableViewDataSource' 问题的解决办法
许多时候我们都有在普通的继承自 UIViewController 的控制器中使用 TableView 的需求,这时候就需要当前控制器类继承 UITableViewDelegate 和 UITableV ...
- 【IDEA】关于 IDEA 中新建 web 项目的 webapp 文件夹没有小蓝点 ,启动服务,访问不到解决方案
问题描述: 新建的 maven 的 Module 项目,webapp 文件夹也是在创建完项目后手动添加的,出现了 webapp 文件夹不能被识别的情况. 解决方案: 第一步: 选中项目按 F4 键, ...
- jave之set和get的用法
package com.xxl.api.admin; public class Test { private int score; public int getScore() { return sco ...
- code与const void*指针
关于指针: 当定义int *p时,它也会在内存中给指针变量p分配一个内存单元,假设这个单元在内存的编址为0x1003:此时,0x1003中的值是不确定的,(因为我们没有给指针赋值),当编译器遇到了p= ...
- Oracle/MySql/SQL Sqlserver分页查询
简述 简单概括一下Oracle,MySql,SQL Sqlserver这三个数据库的分页查询语句. Oracle分页查询 例:每页显示两条数据,现在要查询第二页,也就是第3-4条数据. 查询语句: s ...
- SpringBoot 2.x (12):整合Elasticsearch
Elasticsearch:一个优秀的搜索引擎框架 搜索方面最基本的是SQL的like语句 进一步的有Lucene框架 后来有企业级的Solr框架 而Elasticsearch框架尤其适合于数据量特别 ...
- phpmyadmin解决“高级功能尚未完全设置,部分功能未激活”
首先在点击主页中的导入, 在“从计算机中上传:”选择/usr/share/doc/phpmyadmin/examples的“create_tables.sql.gz”文件 点击执行 但是我的电脑上还是 ...
- iOS 通知、本地通知和推送通知有什么区别? APNS机制。
本地/推送通知为不同的需要而设计.本地通知对于iPhone,iPad或iPod来说是本地的.而推送通知——来自于设备外部.它们来自远程服务器——也叫做远程通知——推送给设备上的应用程序(使用APNs) ...
- 模拟一次CSRF(跨站请求伪造)例子,适合新手
GET请求伪造 有一个论坛网站,网站有一个可以关注用户的接口,但是必须登录的用户才可以关注其他用户. 这个网站的网站是www.a.com 有一天有一个程序员想提高自己的知名度,决定利用CSRF让大家关 ...