Vue 通用 表单验证器

Question

不想用插件,用插件的好处是简单,方便谈不上,有时要定制就很麻烦,不好改
所以琢磨着写一个通用的 表单验证器
请教一下 vue 通用表单验证器的一般写法

最好有个例子,我可以参考一下

Answer 1

<script src="https://unpkg.com/vue@next" data-v="3"></script>
<style>
    .invalid{border-color:#f00}
</style>
<div id="app">
    <form v-formsubmit>
        <input v-required placeholder="不能为空" />
        <input v-regex data-regex="^\d+(\.\d+)?$" placeholder="只能填写数字" />
        <button @click="save" ref="btn">保存</button>
    </form>
</div>
<script>
    var config = {
        methods: {
            save() {
                setTimeout(() => {//需要延时下，click执行先于form绑定的submit事件
                    var valid = !this.$refs.btn.form.classList.contains('invalid')
                    console.log(valid)
                }, 0)

            }
        }
    };
    var app = Vue.createApp(config);
    app.directive('formsubmit', {//表单指令
        mounted(el) {
            el.addEventListener('submit', function (e) {
                e.preventDefault();//阻止表单提交
                var form = this;
                var error = false;
                var els = Array.from(form.querySelectorAll('.validate'));
                if (els.filter(i => i.classList.contains('invalid')).length) {//存在不通过的验证
                    form.classList.add('invalid');
                    return false;
                }

                //什么操作都没有，直接点击保存，触发下原生dom事件执行验证
                for (var el of els) {
                    for (var attr in el.dataset) {
                        var arr = attr.split('_');
                        if (!['HTMLEvents', 'MouseEvents'].includes(arr[0])) continue;
                        var event = document.createEvent(arr[0]);
                        event.initEvent(arr[1], true, false);
                        el.dispatchEvent(event);
                        if (el.classList.contains('invalid')) {
                            form.classList.add('invalid');
                            error = true;
                        }
                    }
                }

                if (!error)//全部验证通过，移除样式
                    form.classList.remove('invalid');

            });
        }
    });
    app.directive('required', {//必须填写数据指令
        mounted: function (el) {
            el.classList.add('validate');//添加过指令，给控件添加validate样式
            el.dataset.HTMLEvents_blur = true;//添加绑定事件，注意驼峰写法，以便表单验证时触发(HTMLEvents或者MouseEvents+_事件名【注意小写】)
            el.addEventListener('blur', () => {
                if (el.value.trim() == '') {
                    el.classList.add('invalid')
                }
                else el.classList.remove('invalid')
            })
        }
    });
    app.directive('regex', {//正则指令
        mounted: function (el) {
            el.classList.add('validate');//添加过指令，给控件添加validate样式
            el.dataset.HTMLEvents_blur = true;//添加绑定事件，注意驼峰写法，以便表单验证时触发(HTMLEvents或者MouseEvents+_事件名【注意小写】)
            var re = new RegExp(el.dataset.regex);
            el.addEventListener('blur', () => {
                if (!re.test(el.value)) {
                    el.classList.add('invalid')
                }
                else el.classList.remove('invalid')
            })
        }
    });
    app.mount('#app')
</script>