需求:在输入框输入时校验输入字符,中英文时校验方式不同
(languageStatus == 0)中文情况下只能输中文汉字
(languageStatus == 1)英文情况下只能输英文字母,短横线,单引号和空格
初始实现:
众所周知,没有条件判断的时候可以直接用
<!-- 只能输入汉字 -->
<el-input v-model="value"onkeyup="value = value.replace(/[^\u4e00-\u9fa5]/g, '')"></el-input>
那么如果存在条件判断该怎么做呢?
我的第一反应是这样:
<!--
languageStatus为0时是中文,只能输汉字
languageStatus为1时是英文,只能输英文字母,短横线,空格和单引号-->
<el-input v-model="value":onkeyup="value = languageStatus? value.replace(/[^a-zA-Z\-\s\']/g, ''): value.replace(/[^\u4e00-\u9fa5]/g, '')"></el-input>
给属性前加上冒号(:),后面改成表达式,齐活~不得不说我也太机智了hhh
结果运行后发现,中英文规则校验倒是管用了
但是一输入就报错:
问题出在哪呢?
在网上苦苦寻觅这个错误都找不到答案
有一篇帖子类似问题底下说改成方法试试?
但是如果传入的是个方法去调用的话,就不能实时的校验输入内容了
然后经过我一遍遍反复试探,终于功夫不负有心人
解决办法:
<el-input v-model="value":onkeyup="(function () {value = languageStatus? value.replace(/[^a-zA-Z\-\s\']/g, ''): value.replace(/[^\u4e00-\u9fa5]/g, '')})()"></el-input>
改成立即执行函数就可以啦~
特此纪录!
原创不易,转载务必注明出处。