表单校验实战

前端的表单验证肯定会经常遇到，特别是做报表系统、后台管理系统等项目的时候，必然会涉及到。当然前端表单验证的插件很多，而且可配置性很高，使用起来也是得心应手，比如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;

        }