1. //输入框 判断
  2.  
  3. //全局异常提示信息
  4. //b 1:失去焦点验证错误提示 2:得到焦点关闭错误提示
  5. //i 来区分是验证那个input框
  6.  
  7. check:function (t,b) {
  8. var that =this;
  9. if(b==0){
  10. if(t==1){
  11. if(that.fNickNames.trim()==""){
  12. // console.log("空值")
  13. that.error.name="请输入名称"
  14. return
  15. }else{
  16. // console.log("有值了");
  17. var reg = /,/g;
  18. if(!reg.test(that.fNickNames)){
  19. that.error.name="不能有特殊字符,修改过后不能为空 "
  20. }
  21. if(that.fNickNames.length>8){
  22. that.error.name="不能超过八个字"
  23. }
  24. }
  25. }
  26. }else{
  27. if(t==1){
  28. // console.log("选中状态")
  29. that.error.name=""
  30. }
  31. }
  32. },
  33.  
  34. data定义
  1. //错误弹窗提示
    error:{
    name:""
    },
  1.  
  1. <div class="inputall top" :class="error.name==''?'':'border-y'">
  2. <span class="input-text">昵称</span>
  3. <div class="prompt-y">{{error.name}}</div>
  4. <input type="text" v-model="fNickNames" placeholder="花花小六" maxlength="10" @focus="check(1,1)" @blur="check(1,0)" class="input-mailbox leftboders"/>
  5. </div>
  1. .border-y {
  2. height: 41px;
  3. border: 2px solid #FF6766;
  4. border-radius: 23px;
  5. z-index:;
  6. position: relative;
  7. }
  8. .prompt-y {
  9. min-width: 200px;
  10. height: 40px;
  11. background: #fff;
  12. border-radius: 4px;
  13. line-height: 40px;
  14. position: absolute;
  15. top: -60px;
  16. left: 20px;
  17. padding: 0 10px;
  18. color: #E45050;
  19. display: none;
  20. }
  21. .prompt-y:after {
  22. content: "";
  23. width:;
  24. height:;
  25. border-width: 10px;
  26. border-style: solid;
  27. border-color: #fff transparent transparent transparent;
  28. position: absolute;
  29. left: 50%;
  30. top: 39px;
  31. transform: translate(-50%);
  32. }
  33. .border-y .prompt-y {
  34. display: block;
  35. }

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. 聪明的质监员(codevs 1138)

    题目描述 Description 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n 个矿石,从1到n 逐一编号,每个矿石都有自己的重量wi 以及价值vi.检验矿产的流程是:见图   ...

  2. git上如何删除已有项目

    删除fork别人的项目 由于最近想删除fork别人项目,步骤如下. 点击进入需要删除fork的项目 进入Settings选项 找到delete this repository按钮 确认是否要删除,Pl ...

  3. E - Round Numbers

    #include <iostream> #include <algorithm> #include <cstdio> #include <cstring> ...

  4. element-ui + el-dialog + Vue.component 注册的富文本控件 第二次及以后打开dialog出现问题解决方法

    自定控件 添加属性  v-if="dialogVisible" <el-dialog title="" :visible.sync="dialo ...

  5. centos 无界面 服务器 安装chrome部署chromedriver

    转:https://blog.csdn.net/u013849486/article/details/79466359 基本 做完了,要弄进docker里面去了的时候,才搜到 docker-chrom ...

  6. TCP长链接调试利器nc

    最近做了不少TCP长链接的开发,包括服务端和客户端.本人感觉服务器端与客户端通信时最好采用字符串形式,这样可以做要平台无关,跨语言.如果采用对象序列化机制通用性会较差.另外采用字符串形式用nc调试很方 ...

  7. Codeforces Round #541 (Div. 2) B.Draw!

    链接:https://codeforces.com/contest/1131/problem/B 题意: 给n次足球比分,求存在平局的机会. 思路: 结构体存储,unique后,判断是否有分数交叉. ...

  8. ICM Technex 2017 and Codeforces Round #400 (Div. 1 + Div. 2, combined) C

    Molly Hooper has n different kinds of chemicals arranged in a line. Each of the chemicals has an aff ...

  9. 操作系统内核(linux)

    操作系统的内核(Kernel) 是一组程序,这组程序的重点在于管理计算机的所有活动以及驱动系统中的所有硬件. 有了内核后,开发者不必自己去考虑机器语言.所有硬件的相关参数.程序的可移植性.专一性了.但 ...

  10. Ajax基础介绍

      什么是Ajax 首先来看一下什么是Ajax,英语全称Asynchronous JavaScript And XML,翻译成中文就是异步的JavaScript和XML.也被称为异步无刷新技术 先来解 ...