[无心插柳]简单实现常用的表单校验函数

BingqiChen 发布于2019-08-23 13:03 / 2838人阅读

摘要：但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。提供了常用的校验规则，需要的可以扩展。

有意取而不得，失落而归。无意间有所获，未有喜悦，但珍惜依旧

1.前言

表单校验，相信绝大部分的开发者会遇到过，网上也有很多插件可使用。但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。有点轮子的雏形，算是无心插柳吧。现在也该分享出来了，和大家交流交流。函数比较粗糙，如果大家有建议，评论留言吧。

1.关于实现的过程，原理都是参考了《JavaScript设计模式与开发实践》策略模式的一个例子。代码比较简单，大家移步到文末的链接，下载相关的文件，运行调试下就会知道是当中的奥秘了。这里就不做过多的介绍，只展示出可以应付哪些校验场景和使用的方法。

2.虽然我开发项目中会使用这个函数，但今天的文章，主要是出于分享和交流学习，介绍下这种表单校验的方式。目前函数比较粗糙，功能不够强大，待完善，在项目中使用要注意谨慎。

3.文章例子依赖 vue ，只为了方便展示，该函数为原生 js 函数。

2.表单校验的场景

首先，简单列举下表单校验的常用场景

2-1.基础数据校验

关于下面调用的规则：rule，全部封装在这个文件下面的ruleData这个变量这里。一看就知道怎么回事了。提供了常用的校验规则，需要的可以扩展。

调用代码


    
    
        
        {{demo1.tips.userName}}
        
        {{demo1.tips.userContact}}

new Vue({
    el: "#form-box",
    data: {
        demo1: {
            userName: "",
            userContact: "",
            tips: ""
        }
    },
    methods: {
        handleSubmit1(){
            let _this = this;
            let _tips=ecValidate.check([
                {
                    //校验的数据
                    el: _this.demo1.userName,
                    //校验的规则
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能为空"}
                    ],
                },
                {
                    //校验的数据
                    el: _this.demo1.userContact,
                    //校验的规则
                    rules: [
                        {rule: "isNoNull", msg: "联系方式不能为空"}, 
                        {rule: "isMobile", msg: "请输入正确的联系方式"}
                    ]
                }
            ])
            this.demo1.tips = _tips;
        }
    }
})

2-2.多种校验规则

输入电话或者邮箱都可以

调用代码


    
    
        
        
        {{demo2.tips}}

new Vue({
    el: "#form-box",
    data: {
        //...
        demo2: {
            userName: "守候",
            userContact: "",
            tips: ""
        },
    },
    methods: {
        //...
        handleSubmit2(){
            let _this = this;
            let _tips=ecValidate.check([
                {
                    //校验的数据
                    el: _this.demo2.userName,
                    //校验的规则
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能为空"}
                    ],
                },
                {
                    //校验的数据
                    el: _this.demo2.userContact,
                    //校验的规则
                    rules: [
                        {rule: "isNoNull", msg: "联系方式不能为空"}, 
                        {rule: "isMobile,isEmail", msg: "请输入正确的联系方式"}
                    ]
                }
            ])
            this.demo2.tips = _tips;
        }
    }
})

2-3.扩展校验规则

比如要增加一个校验规则：名字只能是中文（只能输入中文，这个规则已经收录了，这里只作为展示使用）


    
    
    
        
        {{demo3.tips}}

new Vue({
    el: "#form-box",
    data: {
        //...
        demo3: {
            userName: "",
            tips: ""
        },
    },
    methods: {
        //...
        handleSubmit3(){
            let _this = this;
            let _tips=ecValidate.check([
                {
                    //校验的数据
                    el: _this.demo3.userName,
                    //校验的规则（使用在 mounted 的扩展语法）
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能为空"},
                        {rule: "isChinese", msg: "姓名只能输出中文"}
                    ],
                }
            ])
            this.demo3.tips = _tips;
        }
    },
    mounted:function () {
        //添加扩展规则
        ecValidate.addRule("isChinese",function (val, msg) {
            return !/^[u4E00-u9FA5]+$/.test(val) ? msg : "";
        })
    }
})

2-4.数据有误，定位第一个有误的数据

调用代码


    
    
        
        {{demo4.tips.userName}}
        
        {{demo4.tips.contact}}
        提交成功

new Vue({
    el: "#form-box",
    data: {
        //...
        demo4: {
            userName: "",
            userContact: "",
            tips: {}
        },
    },
    methods: {
        //...
        handleSubmit4(){
                let _this = this;
                //在校验数组里面加上alias字段，保存错误信息。该字段要保证值唯一性，并且要么全部加上，要么全部不加，不然可能会造成页面错误
                let _tips=ecValidate.check([
                    {
                        //校验的数据
                        el: _this.demo4.userName,
                        alias: "userName",
                        //校验的规则
                        rules: [
                            {rule: "isNoNull", msg: "姓名不能为空"}
                        ],
                    },
                    {
                        //校验的数据
                        el: _this.demo4.userContact,
                        alias: "contact",
                        //校验的规则
                        rules: [
                            {rule: "isNoNull", msg: "联系方式不能为空"},
                            {rule: "isMobile,isEmail", msg: "请输入正确的联系方式"}
                        ]
                    }
                ])
                this.demo4.tips = _tips;
            }
        },
    },
    mounted:function () {
        
    }
})

2-5.哪些数据有误，定位有误的数据

调用代码


    
    
    
        
        {{demo5.tips.userName}}
        
        {{demo5.tips.contact}}
        提交成功

new Vue({
    el: "#form-box",
    data: {
        //...
        demo5: {
            userName: "",
            userContact: "",
            tips: {}
        },
    },
    methods: {
        //...
        handleSubmit5(){
            let _this = this;
            //checkAll校验全部的函数，必须要加上alias字段。
            let _tips=ecValidate.checkAll([
                {
                    //校验的数据
                    el: _this.demo5.userName,
                    alias: "userName",
                    //校验的规则
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能为空"}
                    ],
                },
                {
                    //校验的数据
                    el: _this.demo5.userContact,
                    alias: "contact",
                    //校验的规则
                    rules: [
                        {rule: "isNoNull", msg: "联系方式不能为空"}, 
                        {rule: "isMobile,isEmail", msg: "请输入正确的联系方式"}
                    ]
                }
            ])
            this.demo5.tips = _tips;
        },
    },
    mounted:function () {
        
    }
})

2-6.实时校验

调用代码


    
    
    
        
        {{demo6.tips}}

new Vue({
    el: "#form-box",
    data: {
        //...
        demo6: {
            userContact: "",
            tips:"",
        },
    },
    methods: {
        //...
        handleInput6(){
            let _this = this;
            let _tips=ecValidate.check([
                {
                    //校验的数据
                    el: _this.demo6.userContact,
                    //校验的规则
                    rules: [
                        {rule: "isNoNull", msg: "联系方式不能为空"}, 
                        {rule: "isMobile,isEmail", msg: "请输入正确的联系方式"}
                    ]
                },
            ])
            this.demo6.tips = _tips;
        },
    },
    mounted:function () {
        
    }
})

2-7.实时校验，其他校验规则

比如密码强度和长度的校验

调用代码



    
    密码强度：{{demo7.tips}}
    {{demo7.tips}}

new Vue({
    el: "#form-box",
    data: {
        //...
        demo7: {
            pwd:"",
            tips: "",
        }
    },
    methods: {
        handleInput7(){
                let _this = this;
                let _tips=ecValidate.check([
                    {
                        //校验的数据
                        el: _this.demo7.pwd,
                        //校验的规则
                        //由于检查密码强度规则 pwdLv 是实时返回密码强度，并非报错信息。所以该规则要放置在最后
                        rules: [
                            {rule: "minLength:6", msg: "密码长度不能小于6"},
                            {rule: "maxLength:16", msg: "密码长度不能大于16"},
                            {rule: "pwdLv"}
                        ]
                    },
                ])
                //判断 _tips 是否是数字
                this.demo7.tips = _tips.constructor===Number?+_tips:_tips;
        },
    },
    mounted:function () {
        
    }
})

感觉密码强度这样写法有点鸡肋，也不方便，这个是重点优化部分。

2-8.校验数据类型

比如下面检测的是一个数据是否是数组类型

调用代码

let tips=ecValidate.check([
    {
        el:"[1,2,3,4,5]",
        rules:[{rule:"isType:array",msg:"传进去的数组不是数组"}]
    }
]);
console.log(tips);

用到的文件就是下面两个，也欢迎大家 star 一下。

js文件：https://github.com/chenhuiYj/...

demo文件:https://github.com/chenhuiYj/...

4.小结

关于表单的一些常用校验，就暂时写到这里了，这个无心插柳的作品，现在还比较粗糙，以后还要有很长的修改优化之路。也欢迎大家在评论区提出一些建设性的意见，当交流也好。

-------------------------华丽的分割线--------------------

想了解更多，和我交流，内推职位，请添加我微信。或者关注我的微信公众号：守候书阁

GPU云服务器云服务器 php表单的校验简单的服务器校验 linux简单的常用命令 php常用的变量函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99189.html

[无心插柳]简单实现常用的表单校验函数

摘要：但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。提供了常用的校验规则，需要的可以扩展。有意取而不得，失落而归。无意间有所获，未有喜悦，但珍惜依旧 1.前言表单校验，相信绝大部分的开发者会遇到过，网上也有很多插件可使用。但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。有点轮子的雏形...

Jeff 2019-08-02 11:59 评论0 收藏0
[无心插柳]简单实现常用的表单校验函数

摘要：但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。提供了常用的校验规则，需要的可以扩展。有意取而不得，失落而归。无意间有所获，未有喜悦，但珍惜依旧 1.前言表单校验，相信绝大部分的开发者会遇到过，网上也有很多插件可使用。但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。有点轮子的雏形...

JinB 2019-08-29 17:15 评论0 收藏0
重拾css(9)——float

摘要：导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏，父子关系解除。 1.引言对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以，系统的学一学float是非常...

CollinPeng 2019-08-29 12:44 评论0 收藏0
【Python】查看函数的汇编指令

摘要：背景今天在看一篇介绍生成器的文章的时候无心插柳了解到一个很有趣的标准库，可以用于查看函数的汇编指令，从而理解代码的执行机制。相关技术，模块代码感想标准库博大精深啊。背景今天在看一篇介绍Python生成器的文章的时候无心插柳了解到一个很有趣的Python标准库dis，可以用于查看函数的汇编指令，从而理解Python代码的执行机制。相关技术 Python3， dis模块代码 In ...

chnmagnus 2019-07-25 10:46 评论0 收藏0
JS面向对象编程--过程式分析

摘要：开扒但是，没有类的概念，是构造函数和原型链的方式来体现的。福利原型链图示网上找的，看懂即可跳过上述内容该图把原型和构造函数间的关系理的很清楚，可在浏览器的运行并查看对象下原型间的关系。声明：概念性介绍会简单穿插，以过程式分析问题为主，便于提高实践的意义。前言：面向对象，早已烂熟于耳，以java为最,php5.6之后更是扩展了面向对象式开发(起先引入对象概念，没当个大方向，这下无...

why_rookie 2019-08-22 11:07 评论0 收藏0