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

1.前言

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

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

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

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

2.表单校验的场景

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

2-1.基础数据校验

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

调用代码

<div id="form-box">
    <!--校验单个字段-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="请输入姓名" v-model="demo1.userName"></p>
        <p class="u-tips">{{demo1.tips.userName}}</p>
        <p><input type="text" class="u-input-text" placeholder="请输入电话或者邮箱" v-model="demo1.userContact"></p>
        <p class="u-tips">{{demo1.tips.userContact}}</p>
        <p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit1"></p>
    </div>
</div>
复制代码

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.多种校验规则

输入电话或者邮箱都可以

调用代码

<div id="form-box">
    <!--...-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="请输入姓名" v-model="demo2.userName"></p>
        <p><input type="text" class="u-input-text" placeholder="请输入电话或者邮箱" v-model="demo2.userContact"></p>
        <p class="u-tips" :class="{'success':demo2.tips==='success'}">{{demo2.tips}}</p>
        <p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit2"></p>
    </div>
</div>
复制代码

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.扩展校验规则

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

<div id="form-box">
    <!--...-->
    <!--单个字段，扩展规则-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="请输入姓名" v-model="demo3.userName"></p>
        <p class="u-tips" :class="{'success':demo3.tips==='success'}">{{demo3.tips}}</p>
        <p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit3"></p>
    </div>
</div>
复制代码

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.数据有误，定位第一个有误的数据