标题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";
}`
  1. 正则表达式(验证输入是否全为汉字、全为字母等等)
    1、var re =/^[A-Za-z0-9]+$/;//判断是否使字母和数字组合
    re.test(test)这个方法验证就好了。
    2、var regex =/^[\u4E00-\u9FA5]+$/;//判断是否为纯汉字
    3、var re=/^[\d]+$/;//判断是否全为数字
    更多的点击链接,别人总结的。65条最常用正则表达式,你要的都在这里了
Logo

前往低代码交流专区

更多推荐