限制仅可以输入数字和字母
// 页面展示
<input class="input" type="text" placeholder="请输入用户名(仅限数字和字母)"
placeholder-style="color: #97A2AB; fontSize: 26rpx" @input="inputUserName" v-model='formData.userName' />
// 数据
data() {
return {
formData: {
userName: ''
}
}
}
// 校验用户名 (限数字和字母)
inputUserName(event) {
const screeningStr = /[\W]/g
this.$nextTick(() => {
this.formData.userName = event.target.value.replace(screeningStr, '');
console.log('--------打印:', this.formData.userName);
})
}
注意:
1. 当键盘输入时，触发input事件
2. 数据一定要放到this.$nextTick 中, 否者数据不能马上同步,出现v-model 数据不同步的问题
相关正则表达式如下:
只能输入数字
const inputType = /[^\d]/g
只能输入字母
const inputType = /[^a-zA-Z]/g
只能输入数字和字母
const inputType =/[\W]/g
只能输入小写字母
const inputType =/[^a-z]/g
只能输入大写字母
const inputType =/[^A-Z]/g
只能输入数字和字母和下划线
const inputType =/[^\w_]/g //下划线也可以改成%
只能输入中文
const inputType =/[^\u4E00-\u9FA5]/g
只能输入数字和小数点
const inputType =/[^\d.]/g
