对Element的el-input禁止输入特殊字符,这里是禁止输入,而不是输入特殊字符后校验。
这里试用过 @keyup
和 @input.native
,感觉都有点问题。
<el-form :model="userForm" :rules="rules" ref="userRef" label-width="150px">
<el-form-item label="姓名" prop="name">
<el-input
:value="userForm.name"
@input="e => (userForm.name= noSpecialCode(e))"
placeholder="请输入用户名(支持数字字母和汉字)"
maxlength="25"
></el-input>
</el-form-item>
<el-form-item label="账号" prop="accountNo">
<el-input
:value="userForm.accountNo"
@input="e => (userForm.accountNo = noSpecialCode(e, 1))"
maxlength="25"
placeholder="请输入10-16位数字"
></el-input>
</el-form-item>
</el-form>
针对不同类型的输入框可以自己定义相关正则,比如:
type1:只能输入数字
type2:只能输入大写字母和数字
default: 只能输入字母数字和汉字
methods: {
noSpecialCode(e, type) {
let pattern = "";
switch (type) {
case 1:
pattern = /[\D]*/g;
break;
case 2:
pattern = /[^A-Z\d]*/g;
break;
default:
pattern = /[^0-9A-Za-z\u4e00-\u9fa5]*/g;
break;
}
return e.replace(pattern, "");
},
},
有更好的方法欢迎评论,一起学习呀!