标题mint-ui的filed与blur事件验证用户输入格式是否正确
说明:本人前端菜鸟,只是想借个地方做个笔记,为了以后查阅时比较方便。如有大神有什么建议的地方,欢迎提出来。

1、不得不说,mint-ui的官方文档一点都不详细,对于刚开始接触前端的人来说还是有难度的,不过大神们一般都去看mint-ui的源码去了。
**问题:**我想实现如下图的功能,用户输入正确的时候显示勾标志,输入错误显示叉标志。

将filed中的status绑定一个变量NameStatus ,然后利用blur事件检查是否输入正确,如果输入错误,把error赋值给NameStatus,反之success

  1. <mt-field label="就诊人姓名:" placeholder="请输入姓名" :state="NameStatus" v-model="patientInfo.patientName" @blur.native.capture="checkInputName"></mt-field>

data中:NameStatus:'',
blur事件:

  1. checkInputName(){
  2. var regex =/^[\u4E00-\u9FA5]+$/;//判断是全为汉字
  3. var name=this.patientInfo.patientName;
  4. if(!regex.test(name)){
  5. this.NameStatus="error";
  6. }
  7. else{
  8. this.NameStatus="success";
  9. }`

2、正则表达式(验证输入是否全为汉字、全为字母等等)
1、var re =/^[A-Za-z0-9]+$/;//判断是否使字母和数字组合
re.test(test)这个方法验证就好了。
2、var regex =/^[\u4E00-\u9FA5]+$/;//判断是否为纯汉字
3、var re=/^[\d]+$/;//判断是否全为数字

vue中mint-ui的filed的与blur事件结合实现检查用户输入是否正确的更多相关文章

  1. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  2. vue中一个dom元素可以绑定多个事件?

    其实这个问题有多个解决方法的  这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数  这时候千万别忘记 原创 如需转载注明出处 谢谢

  3. Vue中父组件使用子组件的emit事件,获取emit事件传出的值并添加父组件额外的参数进行操作

    需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...

  4. 在主函数中提示用户输入用户名和密码。另写一方法来判断用户输入是否正确。该方法分别返回一个bool类型的登录结果和和一个string类型的登录信息。如登录成功,返回true及“登录成功”,若登录失败则返回false及“用户名错误”或“密码错误”(使用out参数)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  6. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  7. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  8. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  9. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

随机推荐

  1. Android学习第九天

    为什么需要内容提供者 a)        如何创建数据库 b)        文件权限 c)         Chmod linux修改权限 内容提供者原理 a)        内容提供者把数据进行封 ...

  2. HDOJ 5639 Transform

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5637 题意:有一个数x,你可以对x进行两种操作,1.反转x二进制其中任意一位2.x^y(y题目给出), ...

  3. Zookeeper分布式集群原理与功能

    Zookeeper功能简介 ZooKeeper 是一个开源的分布式协调服务,由雅虎创建,是 Google Chubby 的开源实现. 分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/订阅 ...

  4. Linux基本命令总结(八)

    接上篇: 38,一次性定时计划任务的at命令的用法! 1.命令格式: at[参数][时间] 2.命令功能: 在一个指定的时间执行一个指定任务,只能执行一次,且需要开启atd进程(ps -ef | gr ...

  5. 什么是Tensor

    https://blog.csdn.net/kansas_lh/article/details/79321234 tensor是tensorflow基础的一个概念——张量. Tensorflow用到了 ...

  6. PMP备考资料和备考经验分享(基于PMP第六版)

    之前有不少小伙伴私信我说,你PMP考过了,有没有报班呢,有没有自己看的资料,有没有一些经验分享,今天在这里,就统一给大家分享一下,以便大家备考和学习PMP. 先说我自己的情况,我本身是从事项目管理的, ...

  7. gprof性能测试工具

    1.编译时加-pg选项,例如:gcc -pg test.c-o test_gprof.其中test后的_gprof一定要加上.会生成gmon.out. 2.运行程序.gprof test_gprof ...

  8. Stanford Local 2016 E "Election of Evil"(搜索(正解)或并查集(划掉))

    传送门 题意: 给出集合U,V,集合U有n个元素,集合V有m个元素: 有 m 个操作,mi : s1 s2 有一条s1指向s2的边(s1,s2可能属于第三个集合,暂且称之为K集合): 指向边具有传递性 ...

  9. Android sdk platform,sdk tools,sdk Build tools,sdk platform tools 的关系

    1. sdk platform 简单理解为系统版本 最新级别: 28:Android 9 27:Android 8.1 26:Android 8.0 25:Android 7.1 24:Android ...

  10. NLP相关问题中文本数据特征表达初探

    1. NLP问题简介 0x1:NLP问题都包括哪些内涵 人们对真实世界的感知被成为感知世界,而人们用语言表达出自己的感知视为文本数据.那么反过来,NLP,或者更精确地表达为文本挖掘,则是从文本数据出发 ...