前端的表单验证肯定会经常遇到，特别是做报表系统、后台管理系统等项目的时候，必然会涉及到。当然前端表单验证的插件很多，而且可配置性很高，使用起来也是得心应手，比如vee-validate、validate.js 当然这类插件很多我就不一一列举了，亲们可以自行百度。
我这里是想分享一下我拿到需求后通过原生js的处理方案，如有碰到类似需求的小伙伴可以借鉴一下，不足之处欢迎到公众号留言，我会积极改正。
哈哈，欣赏完美图后就上干货了，坐稳了~
需求分析
表单中有一个关键字的字段，字段要求如下
1、关键字不可以重复；
2、关键字不允许包含符号和emoji；
3、关键字之间以逗号隔开；
4、过滤空的关键字。
代码实现
// 校验关键字字段
function checkKeywords (keywords) {
// 过滤除逗号以外的特殊符号
let symbolPattern = /[\ |\~|\`|\！|\!|\@|\#|\￥|\$|\%|\^|\&|\*|\(|\)|\（|\）|\——|\—|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\||\、|\；|\;|\：|\:|\“|\”|\"|\‘|\’|\'|\《|\<|\。|\.|\》|\>|\？|\/|\?]/ig;
if (symbolPattern.test(keywords)) {
alert('关键字不允许使用特殊符号');
// keywords = keywords.replace(symbolPattern,'');
return false;
}
// 过滤表情
let ranges = ['\ud83c[\udf00-\udfff]', '\ud83d[\udc00-\ude4f]', '\ud83d[\ude80-\udeff]'];
let emojiPattern = new RegExp(ranges.join('|'), 'ig');
if (emojiPattern.test(keywords)) {
alert('关键字不允许使用表情');
// keywords = keywords.replace(emojiPattern, '');
return false;
}
// 中文逗号转英文逗号
let dotPattern = /，/ig;
if (dotPattern.test(keywords)) {
keywords = keywords.replace(dotPattern, ',');
}
// 过滤重复字段
let keywordsArr = keywords.split(',');
if (this.isRepeat(keywordsArr)){
alert('关键字不允许重复');
// keywords = Array.from(new Set(keywordsArr)).join(",");
return false;
}
// 过滤空的关键字
keywords = keywordsArr.filter(item => item !== '').join(',');
return keywords;
}
// 判断数组是否重复
function isRepeat (arr) {
var hash = {};
for(let i in arr) {
if(hash[arr[i]]){
return true;
}
hash[arr[i]] = true;
}
return false;
}
以上就是我在项目中遇到的实际需求，客官们感觉不错的话，欢迎关注公众号【grain先森】，可以查看小编更多的分享，谢谢~
