vue中input框只能输入汉字校验的问题
作者：嗷呜~小脑斧
文章介绍了在Vue中实现input框只能输入4个汉字的校验方法,关键在于使用`@blur`事件触发校验方法`onIptCN`,并在方法中判断输入内容是否符合要求,只有当输入内容为4个汉字时,新建按钮才可点击
vue中input框只能输入汉字校验
input只能输入4个字符
且只能为中文，当填写完之后不符合条件，立即提示
<div class="fillContent" v-if="ruleList.studentName == '其他'">
<div class="values">
<input
v-model="studentOther"
class="iptNum"
maxlength="4"
placeholder="请输入学生姓名"
@blur="onIptCN"
/>
</div>
</div>
<div class="confirmButton">
<div :class="!checkNumber || !checkChinese ? 'banBtn' : ''" @click="onInsert">
新建档案
</div>
</div>@blur="onIptCN"是关键，onIptCN 可自己命名
!checkNumber || !checkChinese 只有当 数字和中文校验没有问题之后才可点击新建按钮
@blur是当元素失去焦点时所触发的事件
当点击输入框之外其他地方即失去焦点，需立即提示
<script>
export defalt {
data() {
return{
checkChinese: false,
studentOther:'' //需要使用者自己填写的学生姓名
}},
method：{
onIptCN() {
if (this.studentOther && !/.*?[\u4E00-\u9FFF]+.*/.test(this.studentOther)) {
this.$toast("学生姓名请输入中文");
this.checkChinese = false;
} else {
this.checkChinese = true;
}
},
}
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。