表单校验实战

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

        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券