vue中mint-ui的filed的与blur事件结合实现检查用户输入是否正确
标题mint-ui的filed与blur事件验证用户输入格式是否正确
说明:本人前端菜鸟,只是想借个地方做个笔记,为了以后查阅时比较方便。如有大神有什么建议的地方,欢迎提出来。
1、不得不说,mint-ui的官方文档一点都不详细,对于刚开始接触前端的人来说还是有难度的,不过大神们一般都去看mint-ui的源码去了。
**问题:**我想实现如下图的功能,用户输入正确的时候显示勾标志,输入错误显示叉标志。
将filed中的status绑定一个变量NameStatus ,然后利用blur事件检查是否输入正确,如果输入错误,把error赋值给NameStatus,反之success
<mt-field label="就诊人姓名:" placeholder="请输入姓名" :state="NameStatus" v-model="patientInfo.patientName" @blur.native.capture="checkInputName"></mt-field>
data中:NameStatus:'',
blur事件:
checkInputName(){
var regex =/^[\u4E00-\u9FA5]+$/;//判断是全为汉字
var name=this.patientInfo.patientName;
if(!regex.test(name)){
this.NameStatus="error";
}
else{
this.NameStatus="success";
}`
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事件结合实现检查用户输入是否正确的更多相关文章
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- vue中一个dom元素可以绑定多个事件?
其实这个问题有多个解决方法的 这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数 这时候千万别忘记 原创 如需转载注明出处 谢谢
- Vue中父组件使用子组件的emit事件,获取emit事件传出的值并添加父组件额外的参数进行操作
需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...
- 在主函数中提示用户输入用户名和密码。另写一方法来判断用户输入是否正确。该方法分别返回一个bool类型的登录结果和和一个string类型的登录信息。如登录成功,返回true及“登录成功”,若登录失败则返回false及“用户名错误”或“密码错误”(使用out参数)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- vue mint UI
vue 与mint UI 结合开发手机app html5页面 api 文档 http://mint-ui.github.io/#!/zh-cn
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
随机推荐
- python之内置函数(二)与匿名函数、递归函数初识
一.内置函数(二)1.和数据结构相关(24)列表和元祖(2)list:将一个可迭代对象转化成列表(如果是字典,默认将key作为列表的元素).tuple:将一个可迭代对象转化成元组(如果是字典,默认将k ...
- 整理CSS选择符
1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...
- django restframework permission
与 authentication 和 throttling 一起,permission 决定是应该接受还是拒绝访问请求.权限检查总是在视图的最开始处运行,在任何其他代码被允许进行之前.权限检查通常会使 ...
- 清北学堂Day3
卷积公式(Dirichlet卷积) 这个式子看上去就很变态,那么他是什么意思呢: 就是说 函数f(x)和g(x)对于n的卷积等于n的每一个因子d在f(x)上的值乘上d/n在g(x)上的值的和 例:设g ...
- 图论(最短路&最小生成树)
图论 图的定义与概念 图的分类 图,根据点数和边数可分为三种:完全图,稠密图与稀疏图. 完全图,即\(m=n^2\)的图\((m\)为边数,\(n\)为点数\()\).如: 1 1 0 1 2 1 1 ...
- 一个故事讲清楚BIO NIO 异步
转载请引用:一个故事讲清楚NIO 假设某银行只有10个职员.该银行的业务流程分为以下4个步骤: 1) 顾客填申请表(5分钟): 2) 职员审核(1分钟): 3) 职员叫保安去金库取钱(3分钟): 4) ...
- C++: sprintf浮点数精度控制;
错误的写法: char buf[100]; int num = 10; sprintf(buf, "%.2f", num); ///这种做法是不对的, 按照压栈顺序, 在压入num ...
- SpringBoot使用消息队列RabbitMQ
RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲.消息分发的作用.RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,AMQP,即Advan ...
- dubbo和dubboX与微服务架构(dubbo一)
一.传统三层架构模式的缺陷 三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为:界面层(User Interface layer)web.业务逻辑层(Bu ...
- Python面向对象进阶和socket网络编程-day08
写在前面 上课第八天,打卡: 为什么坚持?想一想当初: 一.面向对象进阶 - 1.反射补充 - 通过字符串去操作一个对象的属性,称之为反射: - 示例1: class Chinese: def __i ...