hvalidate vue前端表单验证 表单验证

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oYuLian/article/details/83306076

hvalidate

项目介绍

自定义vue指令，前端表单校验

安装教程

1. 项目地址

   https://gitee.com/hcsy/hvalidate

2. 在vue项目中引入

   import hvalidate from './js/hvalidate.js'
   Vue.use(hvalidate)

1. 在页面中使用 指令

 v-hvali="{key:'email',rule:'required|email'}"

 <form action="">
            <label for="">phone:</label> <input type="text" placeholder="phone" v-hvali="{key:'phone',rule:'required|phone'}"> <br>
            <hr />
            <label for="">email:</label> <input type="text" placeholder="email" v-hvali="{key:'email',rule:'required|email'}"> <br>
            <hr />
            <button class="btn" type="button" @click="submit">提交</button>
    </form>
    methods: {
        submit() {
            console.log("submit");
            beforeSubmitValidate(() => {
                console.log("提交");
            });
        }
    }

4.demo 请参考index.vue