问题所在:
如何限制用户输入特殊字符
解决方法:
首先存在两种情况
1.只提醒用户输入了特殊字符
这种情况的话,我是用自定义校验规则实现的,举例:
var validateName = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入名称'));
}
// 刨除_ ,-,空格之后的特殊符号
let newValue = value.replace(/[`~!@#$%^&*()\+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g, '');
if(newValue!==value){
callback(new Error('新建表单名称不可用特殊符号( _,-,空格除外)'));
}else{
if(this.resourceNameList.indexOf(value)>-1){
callback(new Error('该资源集名称已存在,请重新输入'));
}else{
callback();
}
}
};
// 规则数组中的相关自定义验证
deviceNumber: [
{ required: true, validator: validateName, trigger: ['blur', 'change'] }
],
主要的思路就是,正则匹配,用空字符替换匹配到的特殊字符,如果value
在替换之后还是和原字符串相同,那就证明当前名称合法,否则,说明名称包含了特殊字符,报错提醒用户。
包含所有特殊字符的写法:
let newValue = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g, '').replace(/\s/g, "");
2.直接禁止输入特殊字符
<el-input
:value="form.name"
@input="e => form.name = validSe(e)"
></el-input>
validSe(value){
value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g, '').replace(/\s/g, "");
return value;
},
当用户输入特殊字符时,input
上直接不显示,只显示字母、数字、汉字。所以为了用户体验,最好还是给用户一个输入特殊字符的提示,这里感兴趣的可以自己实现一下。